How to build simple paging with AngularJS

AngularJS has taken the web development world by storm, and rightly so! After grasping the basics of working with Angular, front-end development becomes really easy and enjoyable.

In this post, we are going to see how we can code simple paging capabilities on a table of data. To save time and demonstrate code functionality I tend to always use Bootstrap in my projects. This way I can code quickly and not worry that my code will look terrible. My data table shown below is simply a User Availability table, showing who is on holiday today.

user availability data table
User availability table

The way that table is populated is via an angular controller and service. The angular service is what calls the API to retrieve the data in JSON format which the controller then consumes and sends to the view via the scope.

Okay, so on to the paging. I want each page to have 10 data rows. We’ll start by creating three new properties on our controller scope. One to hold the current 10 data rows and another to keep track of how many pages we’ve moved along. The third is simply a variable to hold the page size for our pager.

It is important to have your page size in a variable instead of writing 10 everywhere. This will make future amendments easier. Instead of sifting through your code and finding 10, all you’ll do is change 10 to 15 on your pageSize variable and now you have a pager that moves along 15 data rows instead of 10.

To retrieve a subset of all the data returned by our service, we’ll make use of the Slice() method in JavaScript. To use this method, we run it on our array and pass it two parameters. One to tell it where we want to start on the array and the other to tell it where to end. The method would then get us all rows in between.

Let us continue by adding a pageResult() function on to our scope that will make use of the JavaScript Slice() method.

Simple, correct? All the function above does is gets a slice of 10 from the data returned by our service and assigns it to the currentPage variable on our AbsentEmployees object on the scope. We now need to make sure we call our newly created pageResult() function when the service call to the API is a success.

Note: I prefer using named functions (when I remember) simply to make things easier to digest. I could have made my successGettingEmployees() function an anonymous function, but I find those harder to read and understand.

Now we move on to the two functions that will be called when the user clicks the Next and Previous buttons on our Bootstrap pager (shown below).

Bootstrap pager
Bootstrap pager

When the user clicks the Next button, we want to add 10 to our offset variable and when the Previous button is clicked we want to subtract 10 – simple enough!

Notice that on both functions above, we must call our pageResult() function in order to update the 10 data rows stored on our currentPage variable.

All that is left to do now is the view! We must tell our ng-repeat to use the currentPage variable (holds 10 rows) as its source of data, like so:

Okay I lied, that is not all that is left to do! What happens if we’re on the first page and a user clicks the Previous button on the pager? Yep, we’ll get an error. Let us fix that by hiding the Previous button when there is no previous step.

We will start by adding a flag on our AbsentEmployees object on our scope.

Then in our view, we will add the ng-hide directive to our Previous pager button, so our HTML code for the pager now looks like this:

Finally, we’ll make a simple update to both functions that gets called when the Next and Previous buttons are clicked. They now look like this:

All we are doing there is coding the logic around the flag that hides the Previous button. When the Next button is clicked we want the Previous button to show, so we set the hiding flag to false which would cause the previous button to appear.

When Previous is clicked, we make a little check to see if the offset is 10. If it is, we set the hiding flag to true so that the Previous button is then hidden.

So on initial load of our page, here is what we now have:

final pager
Final pager

Notice how the Previous button is hidden and of course, that will show up when Next is clicked and the paging is moved along.

Your assignment is to make this better! How about some validation around hiding the Next button when the user has reached the end of the dataset? We don’t want the user to click the Next button when the data set has reached the end and there are no more rows to display.

Can you think of other ways to improve the above? Awesome! Please leave a comment below 🙂