DevExtreme Vue - 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
JavaScript
CSS
$(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
HTML
TypeScript
CSS
<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
JavaScript
$(function() {
    $("#listContainer").dxList({
        // ...
        pageLoadMode: "scrollBottom" // or "nextButton"
    });
});
Angular
HTML
TypeScript
<dx-list ...
    pageLoadMode="scrollBottom"> <!-- or "nextButton" -->
</dx-list>
import { DxListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
NOTE
When the pageLoadMode is "scrollBottom", at first launch, the List loads as many pages as it can fit into its height.
See Also