Server Side Pagination in Grid Component

If your data has thousands of records, you don't need to load it all at once. IntegralUI Grid component supports lazy loading where you can load data on demand using pagination. You can split your data in multiple pages, where only the first page is loaded initially, and when a new page is selected, you can request a new set of data to be added to the Grid on demand.

The sample code below that shows Grid with server side pagination is available in each JavaScript framework: Angular, React and Vue.

In this example, the data is split in multiple JSON files and initially only the first page is loaded into the Grid. Clicking on next button from paginator on bottom starts the loading process where a new page is loaded into the Grid. This happens when you reach the max page set, after which data is fully loaded and cached, so navigating between pages no longer requires reloading.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Load Data into Grid using Pagination

The IntegralUI Grid component has built-in support for pagination. You can setup pagination to work by setting the paging property. This property has the following settings:

• enabled - determines whether pagination is enabled, default is false
• maxPages - the maximum number of pages available, default is 1
• pageSize - number of rows per page, default is 100
• panel - determines whether paginator component is displayed at grid bottom, default is true

At first, you need to make sure the pagination is enabled. Then you need to determine how many you want to display in the grid per page. Setting the maxPages is import for server side pagination, in order for Paginator component on the bottom to have navigation buttons working. Finally, the panel property allows you to show/hide the built-in paginator component. This is useful when you want to use your own component for pagination.

In this example, we have paging property set to have display maximum of 3 pages where each page can show up to 10 rows:

• JavaScript
• Angular
• React
• Vue

Initially, the grid component loads the first page. Because, JSON data can be in custom format, you may need to convert the data to a format recognizable by the Grid. In this case, the data is in the following format (it contains rows objects with name/value pairs):

• JSON

The Grid component data structure is composed of columns and rows, where each row can hold cell objects for each column. Therefore, to convert this JSON data to acceptable format by the grid you can use this function:

• JavaScript
• Angular
• React
• Vue

At this stage, you only have the first page loaded into the Grid. To make a request to load a new page from the server, you need to handle pageChanged event. This event fires whenever the current page number in paginator changes. This can happen by using navigation buttons from the paginator component. In this example, you need to load a new page from the server whenever the next button is clicked.

To avoid loading new data from the server whenever the pageChanged event is fired, you can set a variable that will hold the number of pages that are already loaded. If the page is already present, just skip the loading process.

• JavaScript
• Angular
• React
• Vue

For demonstration purposes, we are using a timeout of 1 second to show a loading animation using beginLoad and endLoad methods. In real case scenarios, you can call the beginLoad before you will make a request from the server to show the loading icon and notify the user that something is loading. Then when the data is returned from the server, just call the endLoad method to stop the loading animation.

After the last page is loaded, the variable maxPageLoaded that holds the number of loaded pages will equal the maxPages set in paging property in beginning. As a result, you can't no longer load new pages. To increase the number of pages that you can load, just change the maxPages in paging property.

Conclusion

Server side pagination is useful when you have huge data sets and you want to load data on demand into the Grid component, in this case page by page. The Grid already has support for pagination, you only need to set paging parameters and handle events whenever new page is selected. Once the page is loaded from the server and data added into the Grid, it is cached and doesn't require reloading whenever the same page is selected. To notify the user that something is loading from the server, you can use built-in methods that will show a loading animation, or you can create your own custom animations.

IntegralUI Web is an UI library of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.