JqGrid - pager not shown. How to enable it?

Question

I don’t know why, but im, using jqGrid and pager, does not display correctly. I could show viewrecords , but the pager is not. The rest of the table is working fine.

Can someone give me any idea of ​​where the problem is.

My JQGrid:

 jQuery('#report_table').jqGrid({ scroll: 'true', url:'getReportTableData.json', datatype: 'json', height: 400, width: 800, colNames:['Futures','Units'], colModel:[ {name:'Futures',index:'Futures', width: 150, sortable: false}, {name:'Units',index:'Units', width: 150, sortable: false], rowNum:100, loadonce:'false', shrinkToFit: 'true', mtype: 'POST', pager: '#preport_table', postData: { idReport : '75' }, viewrecords: 'true', loadComplete : function (data) { if (data.error == 1){ $('#dialog-modal').dialog({ height: 140, width: 300, modal: true, title: ' Error ', buttons: { cerrar : function() { $(this).dialog('close'); } } }); $('#dialog-modal').html(msgError(data.msg)); } }, caption: '', hidegrid: 'true', }); 

And html code

 <table id='report_table'></table> <div id='preport_table' ></div> 

Thanks.

Answer 1

The main problem is the scroll: true option. In the documentation for this option, you will find the following:

When enabled, pager items are disabled, and we can use the vertical scroll bar to load data.

In addition, your code has some syntax errors that you must fix:

• The second colModel column colModel not contain '}' (see before ']').
• The boolean value must be specified as true and false , and not as the lines 'true' and 'false' (see scroll: 'true' , loadonce:'false' , shrinkToFit: 'true' , viewrecords: 'true' , hidegrid: 'true' )

Answer 2

For others with my gridview: true problem, the pager may not be displayed. I removed the gridview property and a pager appeared.

Answer 3

I prepared some runnable jqGrids to show you how to enable the pager (based on the canonical example that I presented in another answer).

The scroll and gridview properties do not seem to make any difference, I added them to example 4 below and still work (this is the only difference compared to grid 3).

Grid1 displays data only as scrollable, and the second as a pager. The difference lies in the properties:

 pager: '#pagerGrid2', rowNum: 4, viewrecords: true, 

where viewrecords simply optional to show how many records are available. Lower it to hide the record number display.

The rowNum parameter specifies the number of lines on the page that you want to see (here 4). Note that since the height (45) is too small here, it still shows the vertical scroll bar - and the pager (1 of 2) at the same time. This takes place in Grid2 .

To get rid of the scrollbar, increase the size of the height parameter. This is shown in Grid3 in the example below.

 // see: https://free-jqgrid.imtqy.com/getting-started/ // CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid $(function() { var gridSampleData = [ { id: 10, firstName: "Jane", lastName: "Doe1"}, { id: 20, firstName: "Justin", lastName: "Time1" }, { id: 30, firstName: "Jane", lastName: "Doe2"}, { id: 40, firstName: "Justin", lastName: "Time2" }, { id: 11, firstName: "Jane", lastName: "Doe3"}, { id: 21, firstName: "Justin", lastName: "Time3" }, { id: 31, firstName: "Jane", lastName: "Doe4"}, { id: 41, firstName: "Justin", lastName: "Time4" } ]; $("#Grid1").jqGrid({ height: 45, width: 250, colNames: ['First name', 'Last name'], colModel: [{name: "firstName"}, {name: "lastName"}], data: gridSampleData }); $("#Grid2").jqGrid({ pager: '#pagerGrid2', rowNum: 4, scroll: false, viewrecords: true, height: 45, width: 400, colNames: ['First name', 'Last name'], colModel: [{name: "firstName"}, {name: "lastName"}], data: gridSampleData }); $("#Grid3").jqGrid({ pager: '#pagerGrid3', rowNum: 4, scroll: false, viewrecords: true, height: 90, width: 400, colNames: ['First name', 'Last name'], colModel: [{name: "firstName"}, {name: "lastName"}], data: gridSampleData }); $("#Grid4").jqGrid({ scroll: 'true', gridview: true, pager: '#pagerGrid4', rowNum: 4, scroll: false, viewrecords: true, height: 90, width: 400, colNames: ['First name', 'Last name'], colModel: [{name: "firstName"}, {name: "lastName"}], data: gridSampleData }); }); 

 <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>Canonical jqGrid example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script> <table id="Grid1"></table> <br/> <table id="Grid2"></table> <table id="pagerGrid2"></table> <br/> <table id="Grid3"></table> <table id="pagerGrid3"></table> <table id="Grid4"></table> <table id="pagerGrid4"></table> 

Note. Click Full Page (top right corner after clicking Run Code Snippet for a better view of the grid).