The DataSource can be used for automatic paging of both local and remote data. You just need to specify the page parameters and the control will fetch the corresponding records. There is also an option to use the DataSource to pass parameters for paging on the server by enabling server paging and offloading the page operations to the remote server if such exists.

Enable Paging

You can set paging both during initialization, and after the control is initialized. To perform paging during initialization, set the pageSize and page properties in the constructor. Their meaning is as follows:

pageSize: Indicates the number of records to be retrieved for a page of data.
page: Indicates the current page index.

DataSource Paging Setup on Initialization

Copy

var myDataSource1 = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "http://services.odata.org/V3/Northwind/Northwind.svc/Orders",
            dataType: "json"
        }
    },
    schema: {
        data: "value"
    },
    pageSize: 12,
    page: 3
});

myDataSource1.read().then(function () {
    //data is paged
    var data = myDataSource1.view;
});

DataSource Paging Setup after Initialization

Copy

var myDataSource2 = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "http://services.odata.org/V3/Northwind/Northwind.svc/Orders",
            dataType: "json"
        }
    },
    schema: {
        data: "value"
    },
});

myDataSource2.pageSize = 12; //set page size 12
myDataSource2.page = 3;      //navigate to page 3  

myDataSource2.read().then(function () {
    //data is paged
    var data = myDataSource2.view;
});

In the above example, the Promise success callback can be used to retrieve the paged data, as well as many other data source properties, like total and totalPages.

Server Paging

When using remote data binding, the Boolean serverPaging property specifies whether paging parameters should be sent to the data source. If true, the DataSource sends page size and page index parameters and expects the remote endpoint to return the paged data. Note that, based on the scenario, you may need to use the transport.parameterMap property to modify the parameters sent to the remote endpoint. For more information, see the Configuring Remote Binding article. The default value of the serverPaging property is false, meaning that data is paged internally by the DataSource component.

Telerik UI for Windows 8 HTML

Enable Paging

Server Paging