The Angular Club: 15 Step-By-Step How to add Paging functionality to an AngularJS Grid

By Carmel Schvartzman

In this tutorial we'll learn how to add Paging functionality to an AngularJS Grid in our AngularJS Blogs Application. You can follow this step by step tutorial as a standalone, or you can learn all the posts to build the entire app. This is the STEP 15 in this walkthrough to design an end-to-end AngularJS client MVC app.

In the MODEL-VIEW-CONTROLLER architecture of AngularJS, a VIEW is related to a MODEL in the configuration step of the AngularJS app live, when we link it to some CONTROLLER.
This linking action is set in a Module, with the function of declaratively set how the AngularJS app should be bootstrapped. It's like the Main method in a program, setting the instantiation of the application.
Because AngularJS is based on the Dependency Injection paradigm, here is the place to configure the app injecting the functionality that we'll need.

We'll add paging functionality to an AngularJS table, resulting in the following :

In order to add the paging functionality, find in your REST API the method which serves GET http requests. In the Rest API walkthrough we called that method "Blogs" in the "NatureController" controller:

Once you have found it, append to its parameters two new named "size" (the actual size of the page to render) and offset (the current record to send to the client):

Then , code that in case offset is bigger than 0, skip the records until you reach that #offset row:

If "size" has been set, TAKE from the collection the corresponding records.
Save the .cs file, rebuild the project, and press CTL-F5 to start running without debbugging. Now open some browser and type the app URL in it, to check the rendered data. The URL must be in the shape "localhost:YourPort/YourController/YourActionMethod":

After checking that it works and there are no bugs in the REST API back end, open the HTML file which holds the AngularJS View: "BlogList.htm":

After the grid, create a <button> tag to perform the paging. It will call the SeeMorePosts() javascript function when clicked, and it will be visible only when the CheckForMorePosts() functions resolve to true:

Next, let's prepare the AngularJS $resource to support paging functionality. Take a look at the AngularJS documentation at angularjs.org:

Open the "Blog.js" file, where we set our AngularJS controller, and find the $resource's "query" function, which send the requests to the RESTful API backend:

As we can see in the AngularJS documentation, such "query" function can be invoked with a bunch of arguments and also a "success" parameter, meant to hold the callback:

Therefore, append the two arguments we'll send to the API (take care to keep its case-sensitive definition):

Next, take a look at the callback block:

It just copies the returned data into the client side collection. We must change that to enable paging:

We'll need a $scope boolean variable named "thereAreMorePosts" which checks whether the response returned as many records as the $scope "size" will states. Just by now, hard code some size like "2": that will be the size of the page. In addition to that, each time there is a successful response, we'll APPEND the returned data to the client collection, using the "concat" method:

Now we create the $scope variables we need , at the AngularJS controller:

Save everything and refresh the app, to check we have no bugs, and the exposed records are as much as the page size sets (2 by now):

Now let's code the "SeeMorePosts()" function called when clicked the button. This function will update the page offset, before calling the controller method which actually invokes the Restful API: