jqGrid - пейджер не показан. Как включить это?

Question

Я не знаю почему, но я использую jqGrid и пейджер не отображаются должным образом.Я мог показать viewrecords, но пейджер нет.Остальная часть таблицы работает нормально.

Может кто-нибудь подсказать мне, где проблема.

Мой 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', 
});   

И HTML-код

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

Спасибо.

Answer 1

Ваша главная проблема - опция scroll: true.В документации опции вы найдете следующее:

Когда эта опция включена, элементы пейджера отключены, и мы можем использовать вертикальную полосу прокрутки для загрузки данных.

Кроме того, в вашем коде есть некоторые синтаксические ошибки, которые вы должны исправить:

• второй столбец colModel не содержит '}' (см. Перед ']').
• логические значения должны кодироваться как true и false, а не как строки 'true' и 'false' (см. scroll: 'true', loadonce:'false', shrinkToFit: 'true', viewrecords: 'true', hidegrid: 'true')

Answer 2

Я подготовил несколько запускаемых jqGrids, чтобы показать вам, как правильно включить пейджер (на основе канонического примера , который я предоставил в другом ответе).

Свойства прокрутки и gridview, кажется, не имеют никакого значения, я добавил их в пример 4 ниже, и он все еще работает (это единственное отличие по сравнению с сеткой 3).

Сетка1 отображает просто прокручиваемые данные, а второй отображает пейджер. Разница в свойствах:

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

где viewrecords просто необязательно, чтобы показать, сколько записей доступно. Опустите его, чтобы скрыть отображение номера записи.

Параметр rowNum указывает, сколько строк на странице вы хотите увидеть (здесь 4). Обратите внимание, что поскольку высота (45) здесь слишком мала, она все равно показывает вертикальную полосу прокрутки - и пейджер (1 из 2) одновременно. Это относится к Grid2 .

Чтобы избавиться от полосы прокрутки, увеличьте размер параметра высоты. Это показано в Grid3 в приведенном ниже примере.

// 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>

Примечание: Нажмите Полная страница (верхний правый угол после нажатия Выполнить фрагмент кода для лучшего обзора сеток).

Answer 3

Для других с моей проблемой gridview: true может привести к тому, что пейджер не будет отображаться. Я удалил свойство gridview, и появилась панель пейджера.