为什么动态加载数据时 jqGrid 不显示第 2 页?

Question

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

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>

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

注意：我不得不使用jsFiddle，因为StackOverflow目前不支持片段编辑器中的echo页面。

Answer 1

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

或者，您可以重新设计代码以发送前 4 行并page: 1当第 2 页的请求出现时，发送最后 4 行并page: 2

Answer 2

如果你想真正模拟从服务器加载数据而不loadonce: true那么我建议你使用serializeGridData，它发送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)
})
}
}

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