最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jqGrid - Pager not shown. How to enable it? - Stack Overflow

programmeradmin4浏览0评论

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.

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.

Share edited Dec 21, 2017 at 13:39 Matt 27k19 gold badges128 silver badges197 bronze badges asked Sep 8, 2011 at 13:30 bandrobandro 731 gold badge1 silver badge9 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

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')

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

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 pared 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./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./ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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).

发布评论

评论列表(0)

  1. 暂无评论