New to Kendo UI for jQuery? Start a free 30-day trial

ServerPaging

configuration

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 schema.total 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.

serverPaging

Boolean

Default: false

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

<script>
  var dataSource = new kendo.data.DataSource({
    transport: {
      // The remote endpoint which will receive the request parameters and return the response containing the data.
      read: {
        url: "https://demos.telerik.com/service/v2/core/Products",
      }
    },
    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 = this.data(),
        currentPage = this.page();
    
    // 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>`;
      $("#container").append($(element));
    });
  });
</script>