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

我准备了一个JSFIDLE，它模拟从echo页面将数据加载到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" }
    ];
  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>

规范jqGrid示例

一切看起来都很好，直到你点击导航按钮-它不会显示第二页。为什么会这样？如果以静态方式加载数据（如网格#4英寸），则工作正常

---

注意：我不得不使用JSFIDLE，因为在代码段编辑器中。

这是因为在您的示例中，您返回所有数据行，但始终发送

页面：1

。网格发出的每个请求都被告知它正在获取第1页的数据，但它从未获取第2页的数据。要使示例正常工作，可以将属性

loadonce

设置为true，就像我在原始代码的分支中所做的那样。

---

或者，您可以修改代码以发送前4行和

page:1

，当请求到达第2页时，发送最后4行和

page:2

，如果您真的想模拟从服务器加载数据而不加载

loadonce:true

，那么我建议您使用

SerializedGridData

，发送

json

参数（参见Echo服务的）和相应的数据页。可以对源数据数组使用

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

---

请参阅相应的修改演示。应该注意的是，服务器通常应该基于

sidx

和

sord

参数（

request.sidx

和

request.sord

）返回排序数据。我们也可以使用数组的

sort

方法实现该特性，该方法具有回调函数，但我想，您不希望在JSFIDLE中实现jqGrid所需的服务器行为的完全模拟

这是一个非常有用的提示，非常感谢Oleg！一个问题-在我的示例中，我通过URL参数传递数据，我看到您配置了没有参数的echo URL（URL:“/echo/json/”），在您的示例中数据是如何“流动”的？我这样问是因为根据您提供的链接，JSON回送是一个单独的请求，需要一个数据参数——我在jqGrid代码中没有看到这个参数。@Matt:jqGrid将把

postData

中的数据与标准参数结合起来，发送到服务器，并转发到

SerializedGridData

，我在演示中使用了它。最后，

serializeGridData

返回的值将用作底层Ajax请求的

data

参数的值。因此，简单的代码（对于

loadonce:true

场景）将是

postData:{json:json.stringify（gridSampleData）}

或

postData:{json:function（）{return json.stringify（gridSampleData）；}

。见多谢奥列格-如果可以，我会第二次投票@马特：不客气！我有足够的声望点数，我不能使用。因此，投票对我来说不是问题（但它可以帮助其他人找到stackoverflow的信息）。我很高兴能帮助你。