/ By
Arjun / Published on June 14, 2017Depending on your needs sometimes you may wish to create a pagination with an array of items. This post will teach you, paginating an array objects in Javascript.
When manually(Without plugins) paginating, you should manually “slice” the array of results into checks. If you’re unsure how to do this, check out the slice JavaScript function.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function Paginator(items, page, per_page) { var page = page || 1, per_page = per_page || 10, offset = (page - 1) * per_page, paginatedItems = items.slice(offset).slice(0, per_page), total_pages = Math.ceil(items.length / per_page); return { page: page, per_page: per_page, pre_page: page - 1 ? page - 1 : null, next_page: (total_pages > page) ? page + 1 : null, total: items.length, total_pages: total_pages, data: paginatedItems }; } |
If you see Paginator() function, it will accept 3 parameters, items, collection of items, page, number of current page, per_page , number of items to be shown in the request.
How to use
As I mentioned above you just have to pass one required parameter and 2 option methods as for the need. Lets take a sample data and check the results as shown below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | let items = [ { "id": 1, "first_name": "Arjun", "last_name": "A", }, { "id": 2, "first_name": "Kalyan", "last_name": "J", }, { "id": 3, "first_name": "Raj", "last_name": "Kiran", }, { "id": 4, "first_name": "Naveen", "last_name": "A", }, { "id": 5, "first_name": "Pravinh", "last_name": "A", }, { "id": 6, "first_name": "Srinivas", "last_name": "S", }, { "id": 7, "first_name": "Mahipal", "last_name": "K", }, { "id": 8, "first_name": "Sathish", "last_name": "Y", }, { "id": 9, "first_name": "Aravind", "last_name": "A", }, { "id": 10, "first_name": "Phani", "last_name": "C", }, { "id": 11, "first_name": "Krishna", "last_name": "A", }, { "id": 12, "first_name": "Pradeep", "last_name": "S", } ]; console.log(Paginator(items)); // output will be as shown below /*{ page: 1, per_page: 10, pre_page: null, next_page: 2, total: 12, total_pages: 2, data: [ { id: 1, first_name: 'Arjun', last_name: 'A' }, { id: 2, first_name: 'Kalyan', last_name: 'J' }, { id: 3, first_name: 'Raj', last_name: 'Kiran' }, { id: 4, first_name: 'Naveen', last_name: 'A' }, { id: 5, first_name: 'Pravinh', last_name: 'A' }, { id: 6, first_name: 'Srinivas', last_name: 'S' }, { id: 7, first_name: 'Mahipal', last_name: 'K' }, { id: 8, first_name: 'Sathish', last_name: 'Y' }, { id: 9, first_name: 'Aravind', last_name: 'A' }, { id: 10, first_name: 'Phani', last_name: 'C' } ] } */ console.log(Paginator(items,2)); // output will be as shown below /* { page: 2, per_page: 10, pre_page: 1, next_page: null, total: 12, total_pages: 2, data: [ { id: 11, first_name: 'Krishna', last_name: 'A' }, { id: 12, first_name: 'Pradeep', last_name: 'S' } ] } */ console.log(Paginator(items,2,5)); // output will be as shown below /* { page: 2, per_page: 5, pre_page: 1, next_page: 3, total: 12, total_pages: 3, data: [ { id: 6, first_name: 'Srinivas', last_name: 'S' }, { id: 7, first_name: 'Mahipal', last_name: 'K' }, { id: 8, first_name: 'Sathish', last_name: 'Y' }, { id: 9, first_name: 'Aravind', last_name: 'A' }, { id: 10, first_name: 'Phani', last_name: 'C' } ] } */ |
I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.
I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.
how to display in UI ??
Store the response in a variable and access them and loop over the data elements, reaming all you can directly access.
How plzase 🙁
Like it. Perfect for what I need. Great for any arrays you want to page. You should add it to npm.
Bro, how can I display it in a div please. Thank you for this!
Thank you from 2021