How to Paginate Array in JavaScript

In this tutorial, we are going to see how to paginate an array using javascript but first have look at the short introduction to pagination.

What is Pagination?

Pagination is a method or technique that is used for dividing data into multiple separate pages. Let’s assume you have a wide range of attires but you don’t want to upload it on the same page because it will take time to load the website and it will also affect the performance and speed of the website.

So for this purpose, we use pagination to divide important links or data into several pages where we can put data within a limit. We can divide the data from 1 to 10 pages on the website, so if the user did not get his or her desired output on page 1 so they can move to the next page where they can find their results.

I hope you got the concept of pagination, now let’s see how can we paginate arrays check out the following examples.

Example 1

<html>
<head>
 
<title></title>
</head>
<body>

<script type="text/javascript">
const pagearry = (array, pagElem, pageNo) => {
  return array.slice((pageNo - 1) * pagElem, pageNo * pagElem);
}

console.log(pagearry([1, 2, 3, 4, 5, 6], 2, 2));
console.log(pagearry([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 4, 1));

</script>
</body>
</html> 

Code Explanation

In the above code, we wrote a simple script in HTML structure. Basically, we used the most followed method ”slice” to paginate an array.

In the script, first, we declared a constant with fixed values, which is the array, pagElem and pageNo then we returned a slice function that will perform slicing and take an array and will return those elements which be shown on the pageNo and in pagElem.

Then we used the consol.log with the const variable (Pagearry) and defined the array in it.

The console.log will return divided array elements in the pages see the results below.

Output

(3) [4, 5, 6]
0: 4
1: 5
2:6
length:3
[[Prototype]]: Array(0)

(5) [6, 7, 8, 9, 10]
0: 6
1: 7
2: 8
3: 9
4: 10
length: 5
[[Prototype]]: Array(0)

In the above output, you can see the paginated array, the slice function divides the array elements that’s why it is showing 3) [4, 5, 6] and (5) [6, 7, 8, 9, 10] As a result.

For better understanding let’s move forward to our next example.

Example 2

let shoes = [
  {
   
"id": 1,
   
"name": "shoestype 1",
  },
  {
   
"id": 2,
   
"name": "shoestype 2",
  },
  {
   
"id": 3,
   
"name": "shoestype 3",
  },
  {
   
"id": 4,
   
"name": "shoestype 4",
  },
  {
   
"id": 5,
   
"name": "shoestype 5",
  },
  {
   
"id": 6,
   
"name": "shoestype 6",
  },
];



function pagearry(prods, home_page, per_page_prods) {
  let hpage = home_page || 1,
  perpage = per_page_prods || 10,
  cancelout = (hpage - 1) * perpage,

  paginatedProds = prods.slice(cancelout).slice(0, per_page_prods),
  all_pages = Math.ceil(prods.length / perpage);

  return {
    homepage: hpage,
    per_page: perpage,
    per_page: hpage - 1 ? hpage - 1 : null,
    next_page: (all_pages > hpage) ? hpage + 1 : null,
    total: prods.length,
    total_pages: all_pages,
    data: paginatedProds
  };
}


console.log(pagearry(shoes, 2,2));

Code Explanation

In the above code we created an HTML document, we wrote a script in which we declared an array first, in the array we stored 6 elements with ids and names.

We declared a function named “pagearry” and passed prods, home_page, and per_page_prods as parameters, you can see we used the sliced method because it will return the array elements which will be shown in the home page and per page.

Basically, the pagearry function will create paging, which means to say it will divide the array of elements into 3 pages.

The above code will show the total of 3 pages, it will also show the present array of elements on each page and the total number of the element.

Check out the results below.

Output

{homepage: 2, per_page: 1, next_page: 3, total: 6, total_pages: 3, …}
1.  data: Array(2)
1.  0: {id: 3, name: 'shoestype 3'}
2.  1: {id: 4, name: 'shoestype 4'}
3.  length: 2
4. [[Prototype]]: Array(0)
2.  homepage: 2
3.  next_page: 3
4.  per_page: 1
5.  total: 6
6.  total_pages: 3
7. [[Prototype]]: Object

As you can see from the output above it is showing all pages with rows home page with two array elements, the next page with three array elements, per page with one element, total elements were 6 and total pages were 3.

In other words, it will show how many products will be shown on each page.

Conclusion

In this tutorial we talked about how to paginate an array in Javascript, first of all, we discussed an introduction to javascript pagination then we saw an example using the slice method to paginate an array.

We discussed another example in which we saw how to show the total number of pages with different array elements size and the number of elements on each page.

That’s all for today hope you like the tutorial if you have any queries regarding this article so feel free to contact us below. Thanks for reading.

Leave a Comment