$(function() {
    $("#listContainer").dxList({
        dataSource: new DevExpress.data.DataSource({
            store: /* A store is configured here */,
            paginate: true,
            pageSize: 10
        }),
        // ...
    });
});

Angular

TypeScript

HTML

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>

Vue

App.vue

<template>
    <DxList
        :data-source="listDataSource"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxList from 'devextreme-vue/list';
import DataSource from 'devextreme/data/data_source';

const listDataSource = new DataSource({
    store: /* A store is configured here */,
    paginate: true,
    pageSize: 10
});

export default {
    components: {
        DxList
    },
    data() {
        return {
            listDataSource
        }
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import List from 'devextreme-react/list';
import DataSource from 'devextreme/data/data_source';

const listDataSource = new DataSource({
    store: /* A store is configured here */,
    paginate: true,
    pageSize: 10
});

export default function App() {
    return (
        <List
            dataSource={listDataSource}
        />
    );
}

ASP.NET MVC Controls

Razor C#

@(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

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
    ],
    // ...
})

Vue

App.vue

<template>
    <DxList ...
        page-load-mode="scrollBottom" /> <!-- or "nextButton" -->
</template>

<script>
// ...
</script>

React

App.js

// ...
export default function App() {
    return (
        <List ...
            pageLoadMode="scrollBottom" /> {/* or "nextButton" */}
    );
}

NOTE

The List renders as many pages as it can fit into its height when the UI component is displayed for the first time and the pageLoadMode is set to "scrollBottom".

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.

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery List - Paging

jQuery

Angular

Vue

React

ASP.NET MVC Controls

jQuery

Angular

Vue

React

See Also