How can I paginate an array of objects in JavaScript?

Depending 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.

11 Comments

  9. Thanks for some other magnificent post. The place else could anybody get that
    kind of info in such an ideal means of writing?

    I’ve a presentation subsequent week, and I am at the search for such information.

    Reply

Leave a Reply

Your email address will not be published.