jQWidgets Forums

Hi jmshim,

Thank you for contacting us!

I have created a code snippet which enables you to have this type of functionality.
Note that I have used this demo for base:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/custompager.htm

            var pagerrenderer = function () {
                var element = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
                var datainfo = $("#grid").jqxGrid('getdatainformation');
                var paginginfo = datainfo.paginginformation;

                // Here we create the element with buttons for the pagesize options but you can use another if you want
                var showrowsElement = $("<span> Show rows:</span><button value='10'>10</button><button value='20'>20</button><button value='30'>30</button>")
                showrowsElement.addClass( 'show-rows-element')
                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 });

                showrowsElement.appendTo(element)
                leftButton.appendTo(element);
                rightButton.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;

               //Show rows button event
                showrowsElement.on('click', function (event){

                    if(event.target.tagName.toLowerCase() ==='button'){

                        var btnValue = parseInt(event.target.value)
                        $('#grid').jqxGrid({ pagesize: btnValue});
                   
                    }
                })

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

            

                rightButton.click(function () {
                    $("#grid").jqxGrid('gotonextpage');
                });

                leftButton.click(function () {
                    $("#grid").jqxGrid('gotoprevpage');
                });

                return element;
            }

And this is the CSS class I added to the element:

    .show-rows-element{
        margin-left: 20px;
        justify-content: space-evenly;
    }
    button.show-rows-element{
        border: none;
        background: transparent;
    }

Let me know if that 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