jQuery datagridview footer plugins

The data grid comes with a few footer plugins by default. Should you want to create your own, you can create your own function as below and pass it to the getFooterPlugins option. Below function is an implementation of the pageInput plugin but translated in Dutch.

function myPager (footerElement, metaData, datagridview) {
    let page = $('<input>', { type: 'text' })
        .addClass('datagridview-paging-page')
        .val(metaData.page + 1);
    let label = $('<span>')
        .addClass('datagridview-paging-page-label')
        .text('Pagina: ')
    let go = $('<button>')
        .addClass('datagridview-paging-go')
        .text('Gaan')
        .click(function () {
            datagridview.initiatePaging(page.val() - 1, metaData.rowsPerPage);
        });

    $(footerElement).append(label, page, go);
}

The footer plugin functions are called with the following parameters:

• footerElement is a jQuery object representing the div in which your content should be placed
• metaData is the current and latest version of the meta data, including page, page size, total items and total pages
• datagridview is a reference to the data grid object itself.

The paging event is initiated by calling the initiatePaging function on the data grid view with the parameters page and pageSize. In the example this happens when clicking the button. Please note that the page parameter is 0-based. In the user interface this is normally corrected to be 1-based.