Grid Paging

In wjigrid, by default, the grid displays in one continuous window. However, by setting allowPaging to true, you can divide large amounts of data into pages of a specified size for easier viewing. With paging enabled, users can move between pages using links or buttons above or below the grid.

By default, paging buttons display in the footer of the grid. You can use the position option to change the location of the paging button. You can use the pageSize option to set the number of records to show on each page. By default, it shows ten.

For example, the following script sets the pageSize option to 3 records, and sets the position option to "top."

Live Widget
Script

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            allowPaging: true, 
            allowVirtualScrolling: true,
            pageSize: 3, 
            pagerSettings: { position: "top", pageButtonCount:"2"}, 
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C'],
                [1, 'United States', 'Curry, John', 'G'],
                [23, 'Canada', 'Aalto, Antti', 'C', 'L'],
                [45, 'Canada', 'Acton, Keith', 'C', 'R'],
                [69, 'Canada', 'Ahern, Fred', 'RW', 'R']
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    });
</script>

You can select which buttons to display for paging by setting the pagerSettings mode option.

Setting	Description	Result
nextPrevious	Displays only Next and Previous buttons.
nextPreviousFirstLast	Displays Next, Previous, First, and Last buttons.
numeric (default)	Displays numeric link buttons for direct access to each page. By default, ten page numbers display, but you can change the number in the pagerSettings pageButtonCount option.
numericFirstLast	Displays numeric buttons with First and Last buttons to either side. By default, ten page numbers display, but you can change the number in the pagerSettings pageButtonCount option.

You can also localize or customize the tool tip text of the pager buttons. For more information, please see the Custom Grid Strings topic in the Localization section.

How To

Use Custom Paging