为什么动态加载数据时jqGrid不显示第二页？答案

【问题标题】：Why does jqGrid not show 2nd page when data is loaded dynamically?为什么动态加载数据时jqGrid不显示第二页？
【发布时间】：2018-07-16 19:12:06
【问题描述】：

我准备了一个 jsFiddle，它模拟从回显页面将数据加载到 jqGrid 中。这是一个例子：

jqGrid Paging Example (click to run)

$(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" }
    ];
  var rowsPerPage = 4;
  var numRows = gridSampleData.length;
  var pagedData = {
    page:1, total:numRows/rowsPerPage, records: numRows, rows: gridSampleData
  }

  // simulate AJAX request: use echoUrl instead of real web service 
  var jsonData = JSON.stringify(pagedData);
  var echoUrl = '/echo/js/?js=' + jsonData; 

  $("#Grid4").jqGrid({ scroll: false, gridview: true,
    pager: '#pagerGrid4', rowNum: rowsPerPage, viewrecords: true,  
    height: 90, width: 400,
    colNames: ['First name', 'Last name'],
    colModel: [{name: "firstName"}, {name: "lastName"}],
    datatype: "json",
        jsonReader: {
      page: "page",
      total: "total",
      records: "records",
      root: "rows",
      repeatitems: false
        },
    mtype: 'POST',
    url: echoUrl
  });
});

HTML：

<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="Grid4"></table>
<table id="pagerGrid4"></table>

一切看起来都很好，直到您单击导航按钮 - 它不会向您显示第二页。为什么是这样？如果您静态加载数据，如this example 中的网格 #4，它可以正常工作。

注意：我必须使用 jsFiddle，因为在 sn-p 编辑器中是StackOverflow currently does not support an echo page。

【问题讨论】：

标签： javascript jquery html jqgrid

【解决方案1】：

如果您想真正模拟从服务器加载数据没有 loadonce: true，那么我建议您使用serializeGridData，它发送json 参数（参见Echo 的the documentation服务）与相应的数据页。可以在源数据数组上使用slice。

serializeGridData: function (request) {
    var start = (request.page - 1) * request.rows;

    return {
        json: JSON.stringify({
            page: request.page,
            total: gridSampleData.length/request.rows,
            records: gridSampleData.length,
            rows: gridSampleData.slice(start, start + request.rows)
        })
    }
}

查看对应的修改演示https://jsfiddle.net/OlegKi/bny6h1nz/2/。应该注意的是，服务器通常应该根据sidx 和sord 参数（request.sidx 和request.sord）返回排序的数据。也可以使用数组的sort 方法实现该功能，该方法具有回调函数，但我想，您不想在JSFiddle 中实现对jqGrid 所需的服务器行为的完全模拟。

【讨论】：

这是一个非常有用的提示，非常感谢 Oleg！一个问题 - 在我的示例中，我通过 URL 参数传递数据，我看到您已经配置了不带参数的回显 URL（url：'/echo/json/'），数据如何在您的示例中“流动”？我问是因为根据您提供的链接，JSON 回显是一个单独的请求，需要一个数据参数 - 我在 jqGrid 代码中没有看到。
@Matt：来自postData的数据将与标准参数组合，由jqGrid发送到服务器，并将转发到我在演示中使用的serializeGridData。最后，serializeGridData 的返回值将用作底层 Ajax 请求的data 参数的值。因此，简单代码（对于loadonce: true 场景）将是postData: { json: JSON.stringify(gridSampleData) } 或postData: { json: function () { return JSON.stringify(gridSampleData); } }。见jsfiddle.net/OlegKi/bny6h1nz/6
非常感谢 Oleg - 如果可以，我会第二次投票！
@Matt：不客气！我有足够的声望点，我不能使用。因此投票对我来说不是问题（但它可以帮助其他人找到stackoverflow的信息）。很高兴能帮到你。

【解决方案2】：

这是因为在您的示例中，您返回所有数据行，但始终发送page: 1。网格发出的每个请求都被告知它正在获取第 1 页的数据，它永远不会获取第 2 页的数据。为了使您的示例正常工作，您可以将属性 loadonce 设置为 true，就像我在您的原始代码的一个分支中所做的那样。 Example Fiddle

或者您可以重新编写代码以发送前 4 行和 page: 1，当请求第 2 页时发送最后 4 行和 page: 2

【讨论】：