DevExtreme React - Paging
If the List should work with a large amount of data, loading all of it in one go may slow the List down at first launch. In this case, it is better to load data page by page.
Paging settings are configured in the DevExtreme DataSource, therefore the access to data should be configured using one of the Stores. In the following example, the ODataStore provides access to an OData service, while the DataSource loads data from this service page by page, five items per page.
jQuery
$(function() { $("#listContainer").dxList({ dataSource: new DevExpress.data.DataSource({ store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, paginate: true, pageSize: 5 }), itemTemplate: function(data, _, element) { element.append( $("<p>").text(data.Product_Name) .addClass("item-text") ) } }); });
.item-text { display: inline-block; vertical-align: middle; margin: 0px 0px 0px 10px; }
Angular
<dx-list [dataSource]="listDataSource"> <div *dxTemplate="let data of 'item'"> <p class="item-text">{{data.Product_Name}}</p> </div> </dx-list>
import { DxListModule } from 'devextreme-angular'; import DataSource from 'devextreme/data/data_source'; import 'devextreme/data/odata/store'; // ... export class AppComponent { listDataSource = new DataSource({ store: { type: "odata", url: "https://js.devexpress.com/Demos/DevAV/odata/Products", key: "Product_ID" }, paginate: true, pageSize: 5 }); } @NgModule({ imports: [ // ... DxListModule ], // ... })
.item-text { display: inline-block; vertical-align: middle; margin: 0px 0px 0px 10px; }
See Also
The next page can be loaded immediately as the user scrolls the List down to the bottom, or after the user clicks the "More" button. To specify the most suitable mode, set the pageLoadMode option.
jQuery
$(function() { $("#listContainer").dxList({ // ... pageLoadMode: "scrollBottom" // or "nextButton" }); });
Angular
<dx-list ... pageLoadMode="scrollBottom"> <!-- or "nextButton" --> </dx-list>
import { DxListModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxListModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.