Client-Side Pagination using VueJS

Pagination is an integral part of web applications, especially when dealing with large data which we do not want (rather not advisable) to display all at once. Most of the time, we query the server for new data (pages) each time users try to switch between pages but at times it might be necessary to get all these data once and serve users’ requests without bothering the server each time.

To show how this can be done using vueJS, we’ll display a list of countries with their call codes and also give users the freedom to determine the number of items they’d like to see per page.

Note: It is assumed that you have at least a basic knowledge of VueJS.

To achieve this, we will need the following in VueJS data, methods and computed properties.

Data

1. allCountries(array) To hold the total countries we have to show to the user.
2. countriesToDisplay(array) To hold all the countries we want the user to see at a time.
3. isLoading(boolean) To show an indicator while we are fetching items from the server.
4. perPage(int) To hold the number of items to display per page, which users can change.
5. currentPage(int) The number of the current page the user is viewing.
6. pageToOpen(int) The next/previous page number to show based on user’s request.

Methods

1. getCountries(): To fetch data (countries) from the server.
2. renderList(): To determine the data to render on DOM.

Computed

1. totalPages(int) Number of pages based on the total number of countries we are to show per page.
2. start(int) Array index of the country to begin with, on a particular page.
3. stop(int) Array index of the country to stop at, on a particular page.
4. showPrev(boolean) Whether to show the previous button.
5. showNext(boolean) Whether to show the next button.

Designing the page

Let’s start by designing the view which will be a simple table using bootstrap.

HTML

The above code is basically just binding our data and computed properties to where we need them in our view.

The CSS

Implementation with VueJS

Explanation

Created: From our created hook, we call the method that will fetch countries and their codes from the server. This way, the request will be made once our Vue component is created.

getCountries(): This will get the data we want to display from the server, indicate to the user that we are fetching data, assign the gotten data to allCountries array and render the data on the DOM.

renderList(pageNumber): This method accepts the page number we are attempting to view and then do the magic for us using the data in allCountries array. It basically populates countriesToDisplay and Vue will automatically update the DOM to reflect the changes.

totalPages(): Calculates and return the total number of pages based on the total number of countries we have and the number of countries to show per page. If the total number of countries is less than or equal to the number of countries we want to show per page, then totalPages will be just 1, otherwise totalPages will be a rounded figure of total number of countries divided by the total to show per page.

start(): The array index (allCountries) to start displaying the data from.

stop(): The array index (allCountries) to stop at.

showNext(): Determines whether to show the next button. The button will only be shown if the current page we’re viewing is not the last page.

showPrev(): Determines whether to show the prev button. The button will only be shown if the current page we’re viewing is not the first page.

And in our watch property, we re-render the list whenever the value ofperPage changes.

Pretty simple and straightforward.

How about adding a search functionality? Wait for it 😉.

Check out the demo here and download the source code here.