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:
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 () {
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;
myDataSource2.page = 3;
myDataSource2.read().then(function () {
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.