Process paging in grid

You can implement the grid's own paging processing using the GridView.setPaging() function.

Please note that this implementation method is different from implementing pagination as a way to save network resources because the entire page data is loaded into the DataProvider and then processed.

Is paging required in the grid?

One of the purposes of using a grid is to scroll through large amounts of data. But why? Should we implement pagination in the grid?

If you need to implement pagination in the grid due to customer demand, you can use RealGrid's own pagination function.

Currently 100 lines, split into 10 pages of 10 lines each

The GridView.setPaging() function is used to process paging. When the function is called, the data contained in the DataProvider is divided into pages and the first page data is displayed in the grid.

Function to retrieve page information

GridView.getPage() - Get current page number GridView.getPageCount() - Get total number of pages

Event issued when the page changes

GridView.onPageChanging() - Called before the page changes GridView.onPageChanged() - called after the page has changed GridView.onPageCountChanged() - Called after the number of pages changes However, these events do not occur when the GridView.setPaging() function is called.

var page = -1;
var totalPage = -1;
 
gridView.setPaging(true, 10);
 
page = gridView.getPage();
totalPage = gridView.getPageCount();
 
$(".current-page-view").text(page + 1);
$(".total-page-view").text(pageCount);
 
gridView.onPageChanged = function(grid, page) {
   $(".current-page-view").text(page + 1);
}
 
gridView.onPageCountChanged = function(grid, pageCount) {
   $(".total-page-view").text(pageCount);
}
 
gridView.onPageChanged = function(grid, page) {
   $(".current-page-view").text(page + 1);
}
 
gridView.onPageCountChanged = function(grid, pageCount) {
   $(".total-page-view").text(pageCount);
}

Move page

The function for moving pages is GridView.setPage().

When processing paging in RealGrid, page numbers are all numbers starting from 0. Therefore, in order to display the page number on the screen, it is necessary to take this into account and add 1.

function setPage3() {
   gridView.setPage(2);
}
 
function setPage7() {
   gridView.setPage(6);
}
 
function setPage100() {
   gridView.setPage(99);
}