JavaScript Grid

Set the pagesize property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="grid"></div>

JavaScript

var theme = "material"
    var source =
           {
               localdata: generatedata(500),
               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 = $("#grid").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 });

                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;
                // update...