DevExtreme Angular - 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.

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;
  • }
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.

JavaScript
  • $(function() {
  • $("#listContainer").dxList({
  • // ...
  • pageLoadMode: "scrollBottom" // or "nextButton"
  • });
  • });
NOTE
When the pageLoadMode is "scrollBottom", at first launch, the List loads as many pages as it can fit into its height.
See Also