
# 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.

```js
const fields = [
  { fieldName: "KorName", dataType: "text" },
  { fieldName: "Gender", dataType: "text" },
  { fieldName: "Age", dataType: "number" },
  { fieldName: "Phone", dataType: "text" },
  { fieldName: "ProductId", dataType: "text" },
  { fieldName: "KorCountry", dataType: "text" },
  { fieldName: "OrderDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "CardNumber", dataType: "text" },
  { fieldName: "Monetary", dataType: "text" },
  { fieldName: "StartDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "EndDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "ToMonth", dataType: "number" },
  { fieldName: "Month", dataType: "number" },
  { fieldName: "Year", dataType: "number" },
  { fieldName: "InterestRate", dataType: "number" },
  { fieldName: "SaveCost", dataType: "number" },
  { fieldName: "SaveMaturity", dataType: "number" },
  { fieldName: "CurrentSave", dataType: "number" }
];

const columns = [
  { name: "KorName", fieldName: "KorName", width: "60", header: { text: "Name" } },
  { name: "Gender", fieldName: "Gender", width: "40", header: { text: "Gender" } },
  { name: "Age", fieldName: "Age", width: "40", header: { text: "Age" }, styleName: "right-column" },
  { name: "Phone", fieldName: "Phone", width: "100", header: { text: "Phone" } },
  { name: "ProductId", fieldName: "ProductId", width: "120", header: { text: "Product ID" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", header: { text: "Investment Country" } },
  { name: "OrderDate", fieldName: "OrderDate", width: "100", header: { text: "Order Date" } },
  { name: "CardNumber", fieldName: "CardNumber", width: "140", header: { text: "Card Number" } },
  { name: "Monetary", fieldName: "Monetary", width: "40", header: { text: "Currency" } },
  { name: "StartDate", fieldName: "StartDate", width: "100", header: { text: "First Payment Date" } },
  { name: "EndDate", fieldName: "EndDate", width: "100", header: { text: "End Date" } },
  { name: "ToMonth", fieldName: "ToMonth", width: "50", header: { text: "Payment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onPageChanged: function(grid, page) {
    document.getElementById("current-page-view").innerHTML = page + 1;
  },
  onPageCountChanged: function(grid, pageCount) {
    document.getElementById("total-page-view").innerHTML = pageCount;
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function setPaging() {
  gridView.setPaging(true, 10);
  
  const page = gridView.getPage();
  const pageCount = gridView.getPageCount();
  
  document.getElementById("current-page-view").innerHTML = page + 1;
  document.getElementById("total-page-view").innerHTML = pageCount;
}

function setPrevPage() {
  const currentPage = gridView.getPage();
  gridView.setPage(currentPage - 1);
}

function setNextPage() {
  const currentPage = gridView.getPage();
  gridView.setPage(currentPage + 1);
}
```

```js
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.

```js
const fields = [
  { fieldName: "KorName", dataType: "text" },
  { fieldName: "Gender", dataType: "text" },
  { fieldName: "Age", dataType: "number" },
  { fieldName: "Phone", dataType: "text" },
  { fieldName: "ProductId", dataType: "text" },
  { fieldName: "KorCountry", dataType: "text" },
  { fieldName: "OrderDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "CardNumber", dataType: "text" },
  { fieldName: "Monetary", dataType: "text" },
  { fieldName: "StartDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "EndDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "ToMonth", dataType: "number" },
  { fieldName: "Month", dataType: "number" },
  { fieldName: "Year", dataType: "number" },
  { fieldName: "InterestRate", dataType: "number" },
  { fieldName: "SaveCost", dataType: "number" },
  { fieldName: "SaveMaturity", dataType: "number" },
  { fieldName: "CurrentSave", dataType: "number" }
];

const columns = [
  { name: "KorName", fieldName: "KorName", width: "60", header: { text: "Name" } },
  { name: "Gender", fieldName: "Gender", width: "40", header: { text: "Gender" } },
  { name: "Age", fieldName: "Age", width: "40", header: { text: "Age" }, styleName: "right-column" },
  { name: "Phone", fieldName: "Phone", width: "100", header: { text: "Phone" } },
  { name: "ProductId", fieldName: "ProductId", width: "120", header: { text: "Product ID" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", header: { text: "Investment Country" } },
  { name: "OrderDate", fieldName: "OrderDate", width: "100", header: { text: "Order Date" } },
  { name: "CardNumber", fieldName: "CardNumber", width: "140", header: { text: "Card Number" } },
  { name: "Monetary", fieldName: "Monetary", width: "40", header: { text: "Currency" } },
  { name: "StartDate", fieldName: "StartDate", width: "100", header: { text: "First Payment Date" } },
  { name: "EndDate", fieldName: "EndDate", width: "100", header: { text: "End Date" } },
  { name: "ToMonth", fieldName: "ToMonth", width: "50", header: { text: "Payment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onPageChanged: function(grid, page) {
    document.getElementById("current-page-view").innerHTML = page + 1;
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.setPaging(true, 10);
        const page = gridView.getPage();
        document.getElementById("current-page-view").innerHTML = page + 1;
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function setPage3() {
  gridView.setPage(2);
}

function setPage7() {
  gridView.setPage(6);
}

function setPage100() {
  gridView.setPage(99);
}
```

```js
function setPage3() {
   gridView.setPage(2);
}

function setPage7() {
   gridView.setPage(6);
}

function setPage100() {
   gridView.setPage(99);
}
```