serverPaging Boolean (default: false)

If set to true, the data source will leave the data item paging implementation to the remote service. By default, the data source performs paging client-side.

Configure if you set serverPaging to true. In addition, pageSize should be set no matter if paging is performed client-side or server-side.

The following options are sent to the server when server paging is enabled:

  • page - The page of data item to return (1 means the first page).
  • pageSize - The number of items to return.
  • skip - The number of data items to skip.
  • take - The number of data items to return (the same as pageSize).

The skip and take values are automatically calculated based on the current page and pageSize. This means that a dataSource with page = 3 and pageSize = 20 will generate a request that has skip = 40 and take = 20.

Use the parameterMap option to send the paging options in a different format.

For more information and tips about client and server data operations, refer to the introductory article on the DataSource.

For a runnable example with enabled server paging, you can visit the Grid remote data binding demo.

Example - enable server paging

<div id="container"></div>

  var dataSource = new{
    transport: {
      // The remote endpoint which will receive the request parameters and return the response containing the data.
      read: {
        dataType: "jsonp",
        url: "",
    serverPaging: true,
    pageSize: 10, // The number of items per page.
    page: 3 // Change the page property to see a different set of items. The endpoint contains 77 items in total. This means that there are eight pages (eight pages multiplied by 10 records each).

  // The remote endpoint is configured to return the items in descending order. The first item is with ID = 77, the last item is with ID = 1
  dataSource.fetch(function() {
    let data =,
        currentPage =;

    // For demo purposes, each item in the current page is rendered on the screen.
    data.forEach((item) => {
      let element = `<p>ID - ${item.ProductID}, Name = ${item.ProductName}, Page = ${currentPage}</p>`;
In this article