Server Side Pagination in AngularJS Grid

Created: 07 March 2016

When you need to load large data sets into the AngularJS Grid, it is always a good practice to divide the data in multiple pages. On request, you can load new data into the Grid. In following sections of this article, we will show you how to create server side pagination in Grid directive.

Grid directive is part of IntegralUI Studio for Weba suite of UI Components for development of web apps

In above demo, we have a grid with initial data page loaded. The pagination buttons below the grid, allows you to load data on demand, by requesting a new page data. Once the data is received from a remote data source, the grid will show it.

Server Side Pagination

In order to implement server side pagination, we need to know the number of rows per page. In our example, we will set this number to 10. That means whenever a new data page is requested, only 10 rows will be retrieved from the remote data source.

enabled - set to true so that Grid knows that data is divided in multiple pages

pageSize - set to 10, represents the number of rows per page

showControlPanel - when false, default pagination control panel is hidden

Now we have Grid directive ready to receive some data.

Create Custom Navigation Buttons

From above code, you may notice that we have showControlPanel set to false, this hides the default pagination controls. We will create a custom control panel, where buttons with page numbers are created on demand, while other buttons appear and disappear as requested.

For our pagination control panel, we are using a list of buttons. We are cycling through the list using ngRepeat directive where specific buttons are shown, when needed.

Load Data from a Remote Data Source

Whenever a button is clicked, depending on its key, a different action is executed. In case of the next page button, we will make a request to load a new data page from the server, if the page is not already loaded.

Note In our case, for data source we are using multiple JSON files and the AngularJS $http service to load the data files into the Grid directive. You can easily change that in your application, with real data from a remote data server.

As code above shows, whenever a new data page is requested, a loading animation is shown to notify the user that data is loading. After data is fully loaded, a new button is created and added to the pagination control panel. This button is also marked as selected so that it notifies to the user the current page number of the data present into the Grid.

Once data page is loaded, we can access it by clicking on corresponding button. The data is already present into the Grid, and we don't have to reload it every time a button is clicked.

Other buttons, like first, previous and last, are showing the first page, previous page and last page respectively. For this purpose, we are using built-in methods from the Grid directive that can change the currently displayed page on demand.

The pagination control panel used in this example is a custom made. You can create your own pagination panel, with any other custom HTML elements, that better suite your application requirements. Then by using few built-in built methods, you can easily navigate among data pages in the Grid directive.

Conclusion

To create a server side pagination is simple, you only need to determine the size of the page by specifying the number of rows that you want to see in current view of the Grid directive for AngularJS. Afterwards, you can load data pages on demand from a remote data server.

The control panel used to navigate among pages is optional and fully customizable. There are built-in methods that allow you to create custom pagination controls that better matches the UI of your application.

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.