jQuery UI Widgets Forums Grid jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager

This topic contains 6 replies, has 4 voices, and was last updated by  u0022 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • ten

    Hello, I am trying to add a button to the left side of the pager on the bottom of my table. To do this it looks like I have to override pagerrenderer and basically recreate the current pager and add my custom code to that.

    The problem is that I cannot find a pagerrenderer example to recreate the pager that has the ‘Go to page:’ followed by the ‘Show rows:’ and a dropdown with the number of row options followed by left and right buttons.

    The ‘Basic Grid with Paging’ example, at this link, shows the table pager I want to recreate but the example code shown will not create the pager shown, it just creates a row and goto link for each page.

    Are there any examples of recreating the pager shown in that example?

    Here is my table configuration,

        source: dataadapter,
        width: defaultWidth,
        filterable: true,
        sortable: true,
        autoheight: true,
        pageable: true,
        virtualmode: true,
        columnsresize: true,
        columnsreorder: true,
        showfilterrow: true,
        showsortmenuitems: false,
        sorttogglestates: 1,
        pagesizeoptions: ['10', '20', '50', '100'],
        pagesize: 10,
        theme: 'metro',



    Hello ten,

    Here is how to implement the page size dropdown in a custom pager. Use the same approach to add the other necessary elements, too.

    <!DOCTYPE html>
    <html lang="en">
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var source =
                   localdata: generatedata(55),
                       { name: 'firstname', type: 'string' },
                       { name: 'lastname', type: 'string' },
                       { name: 'productname', type: 'string' },
                       { name: 'quantity', type: 'number' },
                       { name: 'price', type: 'number' },
                       { name: 'total', type: 'number' }
                   datatype: "array"
                var dataAdapter = new $.jqx.dataAdapter(source);
                var self = this;
                var pagerrenderer = function () {
                    var element = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
                    var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                    var paginginfo = datainfo.paginginformation;
                    var leftButton = $("<div style='padding: 0px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
                    leftButton.jqxButton({ theme: theme });
                    var rightButton = $("<div style='padding: 0px; margin: 0px 3px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
                    rightButton.jqxButton({ theme: theme });
                    var dropdown = $('<div style="float: left;"></div>');
                    dropdown.jqxDropDownList({ source: ['5', '10', '20'], selectedIndex: 1, width: 50, height: 17, autoDropDownHeight: true })
                    dropdown.on('change', function (event) {
                        var args = event.args;
                        if (args) {
                            var item = args.item;
                            var label = item.label;
                            $('#jqxgrid').jqxGrid({ pagesize: parseInt(label) });
                    var label = $("<div style='font-size: 11px; margin: 2px 3px; font-weight: bold; float: left;'></div>");
                    label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount);
                    self.label = label;
                    // update buttons states.
                    var handleStates = function (event, button, className, add) {
                        button.on(event, function () {
                            if (add == true) {
                            else button.find('div').removeClass(className);
                    if (theme != '') {
                        handleStates('mousedown', rightButton, 'jqx-icon-arrow-right-selected-' + theme, true);
                        handleStates('mouseup', rightButton, 'jqx-icon-arrow-right-selected-' + theme, false);
                        handleStates('mousedown', leftButton, 'jqx-icon-arrow-left-selected-' + theme, true);
                        handleStates('mouseup', leftButton, 'jqx-icon-arrow-left-selected-' + theme, false);
                        handleStates('mouseenter', rightButton, 'jqx-icon-arrow-right-hover-' + theme, true);
                        handleStates('mouseleave', rightButton, 'jqx-icon-arrow-right-hover-' + theme, false);
                        handleStates('mouseenter', leftButton, 'jqx-icon-arrow-left-hover-' + theme, true);
                        handleStates('mouseleave', leftButton, 'jqx-icon-arrow-left-hover-' + theme, false);
                    rightButton.click(function () {
                    leftButton.click(function () {
                    return element;
                $("#jqxgrid").on('pagechanged', function () {
                    var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                    var paginginfo = datainfo.paginginformation;
                    self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + "-" + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ' of ' + datainfo.rowscount);
                   source: dataAdapter,
                   columnsresize: true,
                   width: 850,
                   pageable: true,
                   autoheight: true,
                   pagerrenderer: pagerrenderer,
                   columns: [
                     { text: 'First Name', dataField: 'firstname', width: 200 },
                     { text: 'Last Name', dataField: 'lastname', width: 200 },
                     { text: 'Product', dataField: 'productname', width: 170 },
                     { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                     { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                     { text: 'Total', dataField: 'total', cellsalign: 'right', cellsformat: 'c2' }
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>

    Best Regards,

    jQWidgets team


    Thank you, exactly what I needed.


    Hello! Here is my stackblitz


    I have a problem with dropdown with the number of row option.

    When I click next or prev buttons the dropdownlist disappears.



    I have solved the problem. I have another question.
    When I click on the pagerDropDownList then this.myGrid comes undefined.

       this.pagerDropDownList.addEventHandler('change', function (event) {
          const args = event.args;
          if (args) {
              const item = args.item;
              const label = item.label;
              console.log('pagerDropDownList change', this.myGrid);


    Hello u0022,

    You could try with the arrow function.
    Please, take a look at this code snippet:

    this.pagerDropDownList.addEventHandler("change", () => {

    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team


    Thanks! It helped!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.