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

Tagged: , , , , , , , ,

This topic contains 8 replies, has 6 voices, and was last updated by  Yavor Dashev 2 years, 10 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager Posts
  • April 17, 2015 at 2:36 pm jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager #70015

    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

    April 20, 2015 at 8:27 am jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager #70048

    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/

    April 20, 2015 at 6:10 pm jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager #70084

    ten
    Participant

    Thank you, exactly what I needed.
    Ten

    March 14, 2021 at 10:44 pm jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager #114856

    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

    March 15, 2021 at 2:16 am jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager #114857

    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);
      }
    });
    March 15, 2021 at 2:31 pm jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager #114869

    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

    March 15, 2021 at 10:01 pm jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager #114875

    u0022
    Participant

    Thanks! It helped!

    January 24, 2022 at 6:50 pm jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager #121409

    rs@work
    Participant

    I have implemented this CUSTOM PAGING code into web page with JQXGRID.
    The paging is working/incrementing correctly, but the PAGING LABEL IS NOT DISPLAYING NUMBER LABEL – INCREMENTING as it should.
    The new incremented paging label (51 – 100 of 500) is only displaying (for a fraction of a second) when button is clicked.
    Thereafter the label is back to its original number (1 – 50 of 500).

    Please inform me how to display the INCREMENTED PAGING LABEL like this –
    1 – 50 of 500
    51- 100 of 500
    101 – 150 of 500
    151 – 200 of 500………THANKS.

    // BELOW IS YOUR CUSTOM PAGING CODE IMPLEMTED BY ME

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

    January 25, 2022 at 3:31 pm jqxgrid pagerrenderer code to recreate 'Go to page' and 'Show rows' type pager #121426

    Yavor Dashev
    Participant

    Hi rs@work,

    I have created a jsfidlle to showcase how to have this functionality working properly.

    Link to the jsfiddle: http://jsfiddle.net/kmuehpqg/2/

    You can additionally modify it so that it reproduces any further issue so that we could be able to give you a solution for them.

    Let me know if this works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.