jQuery datagridview paging - maikelbos0/VDT GitHub Wiki

Paging elements are created on the bottom of your grid based on the meta data supplied when creating the data grid, or when last populating it. When the user changes the page by using these elements, a datagridview.paged event is triggered on the element that was turned into a data grid view. This event provides a copy of the meta data as a second parameter of the handler. This copy is updated to reflect the new page and page size and is normally passed back to the populate function to show the user the sort operation has succeeded.

Please note that the page property of the meta data object is 0-based, but in the user interface this is always corrected to be 1-based.

<div id="example-table"></div>

<script type="text/javascript">
    $('#example-table').datagridview({
        columns: [
            { data: 'firstName' },
            { data: 'lastName' }
        ]
    });

    $('#example-table').on('datagridview.paged', function (event, metaData) {
        // Get your new data here, based on the provided meta data and any other parameters
        // Normally populating might happen in the success-callback of an AJAX-function
        let data = [];

        $(this).datagridview(function () {
            this.populate(metaData, data);
        });
    });
</script>

When both sorting and paging are available, it is recommended to use the same event handler for both events. They have the same signature and normally both would refresh your data and meta data.

By default, a number of paging plugins is available for your data grid:

• displayBasic is a basic text that shows the current page and total pages; it provides no paging functionality
• displayFull is a text that shows the current page and total pages with current items and total items; it provides no paging functionality
• prevNext is a pager that has buttons for first, previous, next and last page, as well as numbered buttons for the 5 previous and next pages if applicable; any of these buttons can be hidden by css if desired
• pageInput is a text input field with button to input a page number
• pageSizeInput is a text input field with button to input a new page size; this only changes the page size in the meta data

Of these plugins, the following are enabled by default in this order:

• prevNext
• pageInput
• pageSizeInput
• displayFull

Should you want to set these up differently or remove them altogether, please see defaults and options. Should you want to create your own, please see Footer plugins.