JavaScript Grid

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

by jqwidgets

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="jqxgrid"></div>

JavaScript

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: 'energyblue'
     });
     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: 'energyblue'
     });
     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 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);
    ...