jQuery UI Widgets Forums Grid i want paging custom

This topic contains 1 reply, has 2 voices, and was last updated by  Yavor Dashev 1 month, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • i want paging custom #115206

    jmshim
    Participant

    plz i want to paging pagerrenderer source like to pager mode simple add show rows: [10, 20, 30]
    ex ) show rows: [10] << < 1 2 3 4 5 6 7 8 9 10 > >
    anyone help?

    i want paging custom #115218

    Yavor Dashev
    Participant

    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

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

You must be logged in to reply to this topic.