jqGrid - Pager not shown. How to enable it?

Question

I dont know why, but im using jqGrid and pager not show properly. I could show the viewrecords, but pager not. The rest of the table works ok.

Could anybody give me any idea about where is the problem.

My JQGrid is:

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 the html code is

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

Thank you.

Rodas

Answer 1

You main problem is the scroll: true option. In the documentation of the option you will find the following:

When enabled, the pager elements are disabled and we can use the vertical scrollbar to load data.

Moreover your code has some syntax errors which you should fix:

• the second column of the colModel contain no '}' (see before ']').
• boolean values should be codded as true and false and not as strings 'true' and 'false' (see scroll: 'true', loadonce:'false', shrinkToFit: 'true', viewrecords: 'true', hidegrid: 'true')

Khaki

Thank you Oleg. It works. The problem was with 'true' cause the colModel it was ok, but i remove some columns here to make code clear but delete wrong. – Rodas

Answer 2

For others with my problem, gridview: true can cause the pager not to show. I removed the gridview property and the pager bar appeared.

Kiwi

Answer 3

I've prepared some runnable jqGrids to show you how to enable the pager properly (based on the canonical example I provided in a different answer).

The scroll and gridview properties don't seem to make any difference, I have added those to example 4 below and it still works (it is the only difference compared to grid 3).

Grid1 displays the data just scrollable, while the second one is displaying a pager. The difference are the properties:

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

where viewrecords is just optional to show how many records are available. Omit it to hide the record number display.

The rowNum parameter specifies how many rows per page you want to see (here 4). Note that because the height (45) is too small here, it still shows a vertical scrollbar - and the pager (1 of 2) at the same time. This is the case in Grid2.

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

// see: https://free-jqgrid.github.io/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 on Full page (upper right corner after you clicked Run Code Snippet for a better view of the grids).

Beaudette