DevExtreme Vue - Paging

Paging improves the widget's performance on large datasets because it renders rows by pages instead of rendering them at once. To enable paging, set the paging.enabled option to true. Use the pageSize option to change the number of rows per page. You can also specify which page to display by default using the pageIndex option.

jQuery
JavaScript
$(function () {
    $("#treeListContainer").dxTreeList({  
        // ...
        paging: {
            enabled: true,
            pageSize: 15,
            pageIndex: 1    // Shows the second page
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxo-paging 
        [enabled]="true"
        [pageSize]="15"
        [pageIndex]="1"> <!-- Shows the second page -->
    </dxo-paging>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

User Interaction

This section describes how to configure the pager - a component that allows users to navigate through pages and change their size at runtime. The pager consists of the page navigator and several optional elements: the page size selector, navigation buttons, and page information.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget TreeList Pager

Set the showNavigationButtons and the showPageSizeSelector options to true to show the navigation buttons and the page size selector. The set of available page sizes depends on the size of the data source. You can change this set using the allowedPageSizes option.

jQuery
JavaScript
$(function () {
    $("#treeListContainer").dxTreeList({
        // ...
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [10, 20, 50],
            showNavigationButtons: true
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxo-pager
        [showPageSizeSelector]="true"
        [allowedPageSizes]="[10, 20, 50]"
        [showNavigationButtons]="true">
    </dxo-pager>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

Assign true to the showInfo option to show the page information. You can change the default text by specifiyng the infoText.

jQuery
JavaScript
$(function () {
    $("#treeListContainer").dxTreeList({
        // ...
        paging: { enabled: true }
        pager: {
            showInfo: true,
            infoText: "Page #{0}. Total: {1} ({2} items)" 
        }
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxo-paging 
        [enabled]="true">
    </dxo-paging>
    <dxo-pager
        [showInfo]="true"
        infoText="Page #{0}. Total: {1} ({2} items)">
    </dxo-pager>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

View Demo

API

Call the pageCount() method to get the total page count.

jQuery
JavaScript
var totalPageCount = $("#treeListContainer").dxTreeList("instance").pageCount();
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    getTotalPageCount () {
        this.treeList.instance.pageCount();
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

The TreeList also provides the pageIndex(newIndex) and pageSize(value) methods that switch the widget to a specific page and change the page size. They can also be called without arguments, in which case, they return the current page's index and size.

jQuery
JavaScript
$("#treeListContainer").dxTreeList("instance").pageSize(8);
JavaScript
var goToLastPage = function (treeListInstance) {
    treeListInstance.pageIndex(treeListInstance.pageCount() - 1);
}
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    changePageSize () {
        this.treeList.instance.pageSize(8);
    }
    goToLastPage () {
        this.treeList.instance.pageIndex(this.treeList.instance.pageCount() - 1);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
See Also