FrontEnd Pagination Using Javascript
Pagination is simply the act of paging, that is, the number or mark used to indicate the sequence of pages(as a book). Hence it is the process of dividing a document into discrete pages.
With the basic understanding of pagination in general, let now dive in deeply on how pagination can be done on the web.
Before we go any further, I did like to mention that when it comes to pagination on the web, we generally have two flavors; essentially, we have pagination on the frontend(Client), which is what we will be diving deep into, for instance requesting a batch of data(could be 100, 30 or even up to 5000). The other flavor is paginating on the Backend(server), such as requesting different server pages. For instance, a server returning 20 records per page and then having 100 pages in total. As such, when setting up the request, we will have to include the page query.
Again this is about pagination on the frontend where we request a batch of data and paginate it ourselves. Not to worry, we will be diving deep into server-side pagination in a future article.
Project Setup
Irrespective of whatever frontend framework you work with(even if it pure vanilla javascript), the procedure to paginate is still the same. However, I will be using a react project for my example.
The important part of my project structure we will be focusing on is the API and utils folder, as they contain the main files related to pagination. So if you haven't worked with react/redux before, no need to panic as you will still be able to follow along.
Fetch/Displaying List
Beautiful. Once we are familiar with the set-up, we can continue by first getting the data and display the entire list without any form of pagination.
Here is the record we will be using, a list(Array) of unique E-commerce customers. Like I said earlier, we did be focusing on the API folder and the utils folder. Now is the time to check out the API folder.
In the profileApi.js file, all I am doing is grab the record using the native built-in fetch API, which returns a Promise. I then handle the Promise response/error using the functions exposed by the apiUtils file. It is that simple, nothing related to React.js, just basic javascript.
Fantastic, we now have our nice looking profile record displayed. I tried zooming out, yet looking closely on the right, you would notice that the scroll bar sucks, which is really not a good user experience like you really want to save your user the stress of scrolling endlessly gets to the last record.
Now let make this a bit more interesting by paginating the data.
Pagination Logic
We have our whole list, now let spice things up and set up multiple pages. This will be a step-by-step process where I would first want to go over the general idea. Notice we already have the list of Profiles
But what we really want is to display a certain amount of profiles at a time(in this case, 20 profiles). We have the whole list(One giant array of profile records), but instead, what I want is an array of arrays(a list containing lists). Instead of having an array of 100 profiles, I want an array of 10 items, but then each item would be an array of 10 profiles. Hopefully, that makes sense. Now, this takes us to the paginate.js file found in the utils folder.
Instead of dispatching(update the application redux store) loadRawProfileSuccess action alone, we would go a step further to dispatch the loadProfileSuccess action passing it paginated data.
The pagination logic is quite simple, as shown in the paginate.js file. As promised, it is nothing React.js specific, just pure javascript so everyone can follow along. Let me work you through the code in the paginate.js file.
On line1 I am getting the giant array as profiles, which has been passed from the profileAction.js file on line 27
On line 2, I decided to display 20 profile per page(of course, this can vary pending on your desire)
On line 3, I’m using the Javascript Math module to figure out the number of required pages based on the giant record length and my decided item per page.
On lines 5–8, I’m using the “from” method in the Javascript Array module to do the actual pagination. The “from” method takes in an object(aka dictionary in python, hash in ruby) and a callback function. In the object, I passed it the array length(number of pages), then in the callback function, I tell it how to populate the data for each of the items by slicing the start index and stopping at the start+itemsPerPage.
And there you have it Pagination done and dusted; it is that simple, nothing React.js specific about the pagination.
Here comes the only React. Js-specific syntax(as always, the idea is the same irrespective of whatever frontend framework you use). After displaying the paginated data on lines 56–59, I then display buttons for navigation through the entire available pagination without sending multiple requests to the server.
Conclusion
Hopefully, you can now implement frontend pagination of any sort irrespective of the framework.
Here is the application in production, and this is the project repository for reference.
I have included a filtering and search bar in the finished product.
Please give this article a clap if you have learned something. Happy Coding
