React List - Paging
Paging properties are set in the DataSource: paginate enables paging; pageSize specifies how many data items a page should contain.
jQuery
$(function() { $("#listContainer").dxList({ dataSource: new DevExpress.data.DataSource({ store: /* A store is configured here */, paginate: true, pageSize: 10 }), // ... }); });
Angular
import { DxListModule } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { listDataSource = new DataSource({ store: /* A store is configured here */, paginate: true, pageSize: 10 }); } @NgModule({ imports: [ // ... DxListModule ], // ... })
<dx-list ... [dataSource]="listDataSource"> </dx-list>
ASP.NET MVC Controls
@(Html.DevExtreme().List() .ID("list") .DataSource(d => d // Data access is configured here ) .DataSourceOptions(o => o .Paginate(true) .PageSize(10) ) )
The next page can be rendered when a user scrolls the List down to the bottom, or after a user clicks the More button. Set the pageLoadMode property to specify the mode:
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 ], // ... })
Local arrays and remote datasets loaded using the CustomStore in raw mode are only rendered page by page. In other cases, remote datasets are also loaded page by page if the server can partition data.
See Also
- Data Binding: Web API, PHP, MongoDB | OData Service | Custom Sources | JavaScript Array
- List - Localization
If you have technical questions, please create a support ticket in the DevExpress Support Center.