我准备了一个 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,因为 StackOverflow currently does not support an echo page在片段编辑器中。
最佳答案
这是因为在您的示例中,您将返回所有数据行,但始终发送 page: 1
。网格发出的每个请求都被告知它正在获取第 1 页的数据,它永远不会获取第 2 页的数据。为了使您的示例正常工作,您可以将属性 loadonce
设置为 true ,就像我在 fork 中所做的那样你的原始代码。
Example Fiddle
或者您可以重新编写代码以发送前 4 行和 page: 1
,当请求第 2 页时发送最后 4 行和 page: 2
关于javascript - 为什么在动态加载数据时 jqGrid 不显示第二页?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48647827/