jqGrid-Pager未显示.如何启用它

您的主要问题是scroll: true选项。在选项的文档中，您会发现以下内容：

启用后，寻呼机元素将被禁用，我们可以使用垂直滚动条加载数据。

此外，你的代码有一些语法错误，你应该修复：

• colModel的第二列不包含"｝"(请参阅前面的"]"(
• 布尔值应编码为true和false，而不是字符串'true'和'false'(请参阅scroll: 'true'、loadonce:'false'、shrinkToFit: 'true'、viewrecords: 'true'、hidegrid: 'true'(

对于其他有我问题的人，gridview: true可能会导致寻呼机不显示。我删除了gridview属性，出现了寻呼机栏。

我准备了一些可运行的jqGrids，向您展示如何正确启用寻呼机(基于我在另一个答案中提供的规范示例(。

滚动和网格视图属性似乎没有任何区别，我已经将它们添加到下面的示例4中，它仍然有效(这是与网格3相比的唯一区别(。

Grid1只显示可滚动的数据，而第二个则显示一个寻呼机。区别在于属性：

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

其中CCD_ 14只是可选的以显示有多少记录可用。忽略它可以隐藏记录编号显示。

rowNum参数指定每页要查看的行数(此处为4(。注意，由于这里的高度(45(太小，它仍然显示一个垂直滚动条，同时显示寻呼机(第1个，共2个(。网格2中就是这种情况。

要去掉滚动条，请增加高度参数的大小。这显示在下面示例中的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>

注意：单击整页(单击运行代码段后的右上角可更好地查看网格(。