Configuration pager

    Specifies the options of a grid pager.

    Type: Object

    A pager is a grid element that allows the user to navigate through grid pages and change their size at runtime. By default, the pager is visible if paging is enabled and you do not use virtual or infinite scrolling. To change the pager's visibility explicitly, use its visible option.

    The pager consists of a page navigator and a page size selector. The page navigator contains the numbers of pages. Clicking a page number navigates the user to the page. The page size selector contains the page sizes that can be selected. They are specified by the allowedPageSizes option of the pager configuration object. The page size selector is hidden by default. To make it visible, assign true to the pager's showPageSizeSelector option.

    View Demo Watch Video

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the page size selector is made visible using the pager | showPageSizeSelector option. In addition, the set of allowed page sizes is altered by setting the pager | allowedPageSizes option.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            pager: {
                showPageSizeSelector: true,
                allowedPageSizes: [3, 5, 8]
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, the page size selector is made visible using the pager | showPageSizeSelector option. In addition, the set of allowed page sizes is altered by setting the pager | allowedPageSizes option.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [3, 5, 8]
        }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, the page size selector is made visible using the pager | showPageSizeSelector option. In addition, the set of allowed page sizes is altered by setting the pager | allowedPageSizes option.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            pager: {
                showPageSizeSelector: true,
                allowedPageSizes: [3, 5, 8]
            }
        });
    });
    

    allowedPageSizes

    Specifies the page sizes that can be selected at runtime.

    Type: Array|String
    Default Value: 'auto'
    Accepted Values: 'auto'

    When a grid displays data page by page, you can specify the default size of pages using the pageSize option. Additionally, you can enable a user to change the page size at runtime. To do this, make the page size selector visible by setting the pager | showPageSizeSelector option to true. After that, specify the sizes that can be selected in it by assigning an array of these sizes to the pager | allowedPageSizes option. If you do not specify this option, the allowed page sizes will be determined automatically depending on how large the grid data source is.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can change the set of page sizes that can be selected by a user. To do this, select an item in the select box located below the grid. The value of the selected item will be assigned to the pager | allowedPageSizes option.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:700px; margin:0 auto" dx-data-grid="{
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            pager: {
                showPageSizeSelector: true
            },
            bindingOptions: {
                'pager.allowedPageSizes': 'selectedPageSizes'
            }
        }"></div>
        <div style="height:40px; width:320px; margin:0 auto">
            Select a Set of Page Sizes:&nbsp;
            <div style="display:inline-block; vertical-align:middle" ng-model="selectedPageSizes" dx-select-box="{
                height: 35,
                width: 150,
                items: pageSizes
            }"></div>
        </div>
    </div>
    
    var pageSizes = [[3, 5, 8], [5, 8, 10], [8, 10, 15]];
    
    angular
        .module('myApp', ['dx'])
        .controller("demoController", function ($scope) {
            $scope.books = books;
            $scope.pageSizes = pageSizes;
            $scope.selectedPageSizes = pageSizes[0];
        });
    
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can change the set of page sizes that can be selected by a user. To do this, select an item in the select box located below the grid. The value of the selected item will be assigned to the pager | allowedPageSizes option.

    <div style="height:390px; max-width:700px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        paging: { pageSize: 8 },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: selectedPageSizes
        }
    }"></div>
    <div style="height:40px; width:320px; margin:0 auto">
        Select a Set of Page Sizes:&nbsp;
        <div style="display:inline-block; vertical-align:middle" data-bind="dxSelectBox: {
            height: 35,
            width: 150,
            items: pageSizes,
            value: selectedPageSizes
        }"></div>
    </div>
    
    var pageSizes = [[3, 5, 8], [5, 8, 10], [8, 10, 15]];
    
    var myViewModel = {
        books: books,
        pageSizes: pageSizes,
        selectedPageSizes: ko.observable(pageSizes[0])
    };
    
    ko.applyBindings(myViewModel);
    

    In this example, you can change the set of page sizes that can be selected by a user. To do this, select an item in the select box located below the grid. The value of the selected item will be assigned to the pager | allowedPageSizes option.

    <div id="gridContainer" style="height:390px; max-width:700px; margin:0 auto"></div>
    <div style="text-align:center; height:40px">
        Select a Set of Page Sizes:&nbsp;
        <div id="pageSizesSelectBox" style="display:inline-block; vertical-align:middle"></div>
    </div>
    
    var pageSizes = [[3, 5, 8], [5, 8, 10], [8, 10, 15]];
    
    $(function () {
        var dataGrid = $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            pager: {
                showPageSizeSelector: true,
                allowedPageSizes: pageSizes[0]
            }
        }).dxDataGrid('instance');
    
        $("#pageSizesSelectBox").dxSelectBox({
            height: 35,
            width: 150,
            items: pageSizes,
            value: pageSizes[0],
            onValueChanged: function (info) {
                dataGrid.option({
                    pager: { allowedPageSizes: info.value }
                });
            }
        });
    });
    

    infoText

    Specifies the text accompanying the page navigator.

    Type: String
    Default Value: 'Page {0} of {1}'

    When specifying this option, you can access the current page number using position marker 0 and the total page count using position marker 1. Place each of these position markers within curly brackets.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, the text accompanying the page navigator is changed using the infoText option.

    <div ng-controller="demoController">
        <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            pager: {
                showInfo: true,
                infoText: 'Page #{0}. Total: {1} ({2} items)'
            }
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, the text accompanying the page navigator is changed using the infoText option.

    <div style="height:390px; max-width:630px; margin: 0 auto" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        pager: {
            showInfo: true,
            infoText: 'Page #{0}. Total: {1} ({2} items)'
        }
    }"></div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ]
    }
    ko.applyBindings(myViewModel);
    

    In this example, the text accompanying the page navigator is changed using the infoText option.

    <div id="gridContainer" style="height:390px; max-width:630px; margin: 0 auto"></div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            pager: {
                showInfo: true,
                infoText: 'Page #{0}. Total: {1} ({2} items)'
            }
        });
    });
    

    showInfo

    Specifies whether or not to display the text accompanying the page navigator. This text is specified by the infoText option.

    Type: Boolean
    Default Value: false

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can show/hide page info at runtime by toggling the check box under the grid.

    <div ng-controller="demoController" style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            pager: {
                showInfo: true
            },
            bindingOptions: {
                'pager.showInfo': 'checkBoxState'
            }
        }"></div>
        <div ng-model="checkBoxState" dx-check-box="{
            text: 'Show Page Info'
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can show/hide page info at runtime by toggling the check box under the grid.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        pager: {
            showInfo: checkBoxState
        }
    }"></div>
        <div data-bind="dxCheckBox: {
        text: 'Show Page Info',
        value: checkBoxState
    }"></div>
    </div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can show/hide page info at runtime by toggling the check box under the grid.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:380px;"></div>
        <div id="showInfoCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            pager: {
                showInfo: true
            }
        });
    
        $("#showInfoCheckbox").dxCheckBox({
            text: 'Show Page Info',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("pager.showInfo", e.value);
            }
        });
    });
    

    showNavigationButtons

    Specifies whether or not to display buttons that switch the grid to the previous or next page.

    Type: Boolean
    Default Value: false

    Although the page navigator already contains clickable page numbers, you can also supply it with buttons that navigate a user to the previous or next page. To do this, set the showNavigationButtons option to true.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can show/hide the pager navigation buttons at runtime by toggling the check box under the grid.

    <div ng-controller="demoController" style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            pager: {
                showNavigationButtons: true
            },
            bindingOptions: {
                'pager.showNavigationButtons': 'checkBoxState'
            }
        }"></div>
        <div ng-model="checkBoxState" dx-check-box="{
            text: 'Show Navigation Buttons'
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can show/hide the pager navigation buttons at runtime by toggling the check box under the grid.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        pager: {
            showNavigationButtons: checkBoxState
        }
    }"></div>
        <div data-bind="dxCheckBox: {
        text: 'Show Navigation Buttons',
        value: checkBoxState
    }"></div>
    </div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can show/hide the pager navigation buttons at runtime by toggling the check box under the grid.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:380px;"></div>
        <div id="showNavigationButtonsCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            pager: {
                showNavigationButtons: true
            }
        });
    
        $("#showNavigationButtonsCheckbox").dxCheckBox({
            text: 'Show Navigation Buttons',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("pager.showNavigationButtons", e.value);
            }
        });
    });
    

    showPageSizeSelector

    Specifies whether to show the page size selector or not.

    Type: Boolean
    Default Value: false

    If you want a user to be able to change the page size at runtime, make the page size selector visible by setting the showPageSizeSelector option to true. Note that the pager should be visible as well, because the page size selector is a part of it. To specify page sizes that can be selected, set the allowedPageSizes option.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can change the visibility of the page size selector at runtime using the check box under the grid.

    <div ng-controller="demoController" style="text-align:center; height:390px; max-width:630px; margin: 0 auto">
        <div style="height:360px" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            pager: {
                allowedPageSizes: [5, 8, 10],
                showPageSizeSelector: true
            },
            bindingOptions: {
                'pager.showPageSizeSelector': 'checkBoxState'
            }
        }"></div>
        <div ng-model="checkBoxState" dx-check-box="{
            text: 'Show Page Size Selector'
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can change the visibility of the page size selector at runtime using the check box under the grid.

    <div style="text-align:center; height:390px; max-width:630px; margin: 0 auto">
        <div style="height:360px" data-bind="dxDataGrid: {
        dataSource: books,
        columns: columns,
        paging: { pageSize: 8 },
        pager: {
            allowedPageSizes: [5, 8, 10],
            showPageSizeSelector: checkBoxState
        }
    }"></div>
        <div data-bind="dxCheckBox: {
        text: 'Show Page Size Selector',
        value: checkBoxState
    }"></div>
    </div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can change the visibility of the page size selector at runtime using the check box under the grid.

    <div style="text-align:center; height:390px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:360px;"></div>
        <div id="showPageSizeSelectorCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            pager: {
                allowedPageSizes: [5, 8, 10],
                showPageSizeSelector: true
            }
        });
    
        $("#showPageSizeSelectorCheckbox").dxCheckBox({
            text: 'Show Page Size Selector',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("pager.showPageSizeSelector", e.value);
            }
        });
    });
    

    visible

    Specifies whether to show the pager or not.

    Type: String|Boolean
    Default Value: 'auto'
    Accepted Values: 'auto' | true | false

    If a grid displays records page by page, the pager is visible by default. Otherwise, it is hidden. However, you can show/hide the pager when you require using the pager | visible option.

    Show Example:
    AngularJS
    Knockout
    jQuery

    In this example, you can change the visibility of the pager at runtime using the check box under the grid.

    <div ng-controller="demoController" style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" dx-data-grid="{
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            pager: {
                allowedPageSizes: [5, 8, 10],
                showPageSizeSelector: true
            },
            bindingOptions: {
                'pager.visible': 'checkBoxState'
            }
        }"></div>
        <div ng-model="checkBoxState" dx-check-box="{
            text: 'Show Pager'
        }"></div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.books = books;
        $scope.columns = [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ];
        $scope.checkBoxState = true;
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    

    In this example, you can change the visibility of the pager at runtime using the check box under the grid.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div style="height:380px" data-bind="dxDataGrid: {
            dataSource: books,
            columns: columns,
            paging: { pageSize: 8 },
            pager: {
                allowedPageSizes: [5, 8, 10],
                showPageSizeSelector: true,
                visible: checkBoxState
            }
        }"></div>
        <div data-bind="dxCheckBox: {
            text: 'Show Pager',
            value: checkBoxState
        }"></div>
    </div>
    
    var myViewModel = {
        books: books,
        columns: [
            'author',
            { dataField: 'title', width: 210 },
            'year', 'genre', 'format'
        ],
        checkBoxState: ko.observable(true)
    }
    ko.applyBindings(myViewModel);
    

    In this example, you can change the visibility of the pager at runtime using the check box under the grid.

    <div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
        <div id="gridContainer" style="height:380px;"></div>
        <div id="showPagerCheckbox"></div>
    </div>
    
    $(function () {
        $("#gridContainer").dxDataGrid({
            dataSource: books,
            columns: [
                'author',
                { dataField: 'title', width: 210 },
                'year', 'genre', 'format'
            ],
            paging: { pageSize: 8 },
            pager: {
                allowedPageSizes: [5, 8, 10],
                showPageSizeSelector: true
            }
        });
    
        $("#showPagerCheckbox").dxCheckBox({
            text: 'Show Pager',
            value: true,
            onValueChanged: function (e) {
                $('#gridContainer').dxDataGrid('instance').option("pager.visible", e.value);
            }
        });
    });