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
    Participant

    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,

    
    $("#jqxgrid").jqxGrid(
    {       
        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',
    

    Thanks


    Dimitar
    Participant

    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">
    <head>
        <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),
                   datafields:
                   [
                       { 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.find('div').addClass('jqx-icon-arrow-left');
                    leftButton.width(36);
                    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.find('div').addClass('jqx-icon-arrow-right');
                    rightButton.width(36);
                    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) });
                        }
                    });
    
                    leftButton.appendTo(element);
                    rightButton.appendTo(element);
                    dropdown.appendTo(element);
    
                    var label = $("<div style='font-size: 11px; margin: 2px 3px; font-weight: bold; float: left;'></div>");
                    label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount);
                    label.appendTo(element);
                    self.label = label;
                    // update buttons states.
                    var handleStates = function (event, button, className, add) {
                        button.on(event, function () {
                            if (add == true) {
                                button.find('div').addClass(className);
                            }
                            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 () {
                        $("#jqxgrid").jqxGrid('gotonextpage');
                    });
    
                    leftButton.click(function () {
                        $("#jqxgrid").jqxGrid('gotoprevpage');
                    });
    
                    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);
                });
    
                $("#jqxgrid").jqxGrid(
               {
    
                   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' }
                   ]
               });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    ten
    Participant

    Thank you, exactly what I needed.
    Ten


    u0022
    Participant

    Hello! Here is my stackblitz

    https://stackblitz.com/edit/github-nkftnn-bapsg5

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

    When I click next or prev buttons the dropdownlist disappears.

    Thanks


    u0022
    Participant

    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);
          }
        });

    Hristo
    Participant

    Hello u0022,

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

    this.pagerDropDownList.addEventHandler("change", () => {
    	console.log("pagerDropDownList");
    	console.log(this.myGrid);
    });

    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    u0022
    Participant

    Thanks! It helped!

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

You must be logged in to reply to this topic.