jQuery Grid Paging

The paging setting of the grid is controlled by the paging option. Into this option you can specify different settings. Since the grid takes advantage of the shieldPager widget all options into the paging property is transferred to the datapager.


 

$(document).ready(function () {
    $("#grid").shieldGrid({
        dataSource: {
            data: gridData
        },
        paging: {
            pageSize: 7,
            pageLinksCount: 12,
            messages: {
                infoBarTemplate: "From {0} to {1} items of a total of {2}",
                firstTooltip: "First page",
                previousTooltip: "Previous page",
                nextTooltip: "Next page",
                lastTooltip: "Last page"
            }
        },
        columns: [
        { field: "name", title: "Person Name" },
        { field: "age", title: "Person Age" },
        { field: "address", title: "Person Address" }
        ]
    });
});

Online example of grid paging functionality you can find on the followingpaging demo

The grid also offering functionality for page and change page size number programmatically via the methods of pager property:

$(document).ready(function () {
    $("#grid").shieldGrid({
        dataSource: {
            data: gridData                 
        },                
        paging: {
            pageSize: 7,                    
            pageLinksCount: 12
        },
        columns: [                                
        { field: "name", title: "Person Name" },
        { field: "age", title: "Person Age" },
        { field: "address", title: "Person Address" }              
        ]
    });

    var grid = $("#grid").swidget();
    grid.pager.page(3); // This will page the grid to the third page
});