分页在 jQgrid 中不起作用，我缺少什么？
Pagination is not working in jQgrid, what I am missing?
我对 jQgrid 5.1.0 进行了以下设置：
<div id="grid_container">
<table id="grid"></table>
<div id="gridpager"></div>
</div>
<script type="text/javascript">
$.fn.fmatter.btnFormatter = function (cellValue, options, rowData, addOrEdit) {
var btn =
'<a href="#">' +
'<img class="api_button" data-id="' + options.rowId + '" src="/images/icons/16x16/view.png" alt="Show API Response data" title="Show API Response data" />' +
'</a>' +
'<a href="#">' +
'<img class="error_button" data-id="' + options.rowId + '" src="/images/icons/16x16/view.png" alt="Show errors" title="Show errors" />' +
'</a>';
return btn;
};
$(function () {
$("#grid").jqGrid({
url: '/sf/api-logs',
datatype: "json",
colNames: {{ colNames|raw }},
colModel: {{ colFormats|raw }},
width: 980,
height: 300,
pager: "#gridpager",
toppager: true,
hoverrows: true,
shrinkToFit: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
rowList: [10, 20, 50, 100],
data: [],
rownumWidth: 50,
sortable: true,
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
cell: '',
repeatitems: false
},
loadComplete: function (data) {
if (data.records === 0) {
$("#load_grid").addClass("info_msg").html($("<span>", {
"class": "grid-empty",
"text": "No results were found."
})).delay(800).fadeIn(400);
}
}
}).on('click', '.api_button', function () {
var apiResponseContent = $('#apiResponseContent');
$.ajax({
type: "GET",
url: '/sf/api-logs/api-response',
data: {id: $(this).data('id')},
dataType: 'json',
success: function (data) {
if (typeof data[0].error !== 'undefined') {
apiResponseContent.text(data[0].error);
}
apiResponseContent.text(data[0].apiResponse);
$('#api_dialog').dialog('open');
}
});
return false;
});
$('#api_dialog').dialog({
autoOpen: false,
width: 600,
height: $(window).height() * 0.9,
modal: true,
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
}).show();
});
</script>
但是如下图所示，分页不起作用，刷新网格的小图标也没有显示，我这里做错了什么？
更新
我通过添加以下代码设法显示了 refresh 按钮：
$('#grid').jqGrid('navGrid', '#gridpager', {
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshstate: "current"
})
但它只出现在 #gridpagger 如果我也想要它在顶部栏上怎么办？
服务器返回的数据示例如下：https://gist.github.com/reypm/b1d2a303ba471261e55d72bbef099b74
您报告了两个问题：分页不起作用，刷新按钮仅出现在底部分页器上（而不是顶部分页器）。
刷新按钮的问题似乎很简单。您使用 commercial Guriddo，它可能仍然具有使用 jqGrid 4.7 等寻呼机的相同逻辑。旧的 jqGrid 有两个分页器选项：pager 和 toppager，它们的值必须以不同的方式指定。使用 toppager 很容易：可以添加 toppager: true 选项，jqGrid 将生成顶部寻呼机 div 本身并从 true 替换 toppager 的值到新寻呼机的 id 选择器。它将是 toppager: "#grid_toppager"。另一方面，要在网格底部创建寻呼机，必须在 HTML 页面 虚拟 div 的某处创建 ，例如 <div id="gridpager"></div> 并以 pager: "gridpager" 形式使用 pager 参数。 jqGrid 将移动 div 在网格内的另一个地方并用数据填充它。 navGrid、inlineNav、navButtonAdd 等其他方法必须使用 #gridpager 或 "#grid_toppager" 作为参数来创建导航栏并向栏中添加按钮。因此你必须使用像
这样的代码
$('#grid').jqGrid('navGrid', '#grid_toppager', {
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current"
});
或
var $grid = $('#grid'),
topPagerSelector = $grid.jqGrid('getGridParam', 'toppager');
$grid.jqGrid('navGrid', topPagerSelector, {
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current"
});
在首页上创建导航栏并向其添加刷新按钮。或者，您可以使用 navGrid 的 cloneToTop: true 选项将相同的寻呼机添加到两个寻呼机：
$('#grid').jqGrid('navGrid', '#gridpager', {
cloneToTop: true,
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current"
});
如果您只想拥有一个首页寻呼机，则不能使用该选项。您将不得不使用 '#grid_toppager' 和 navButtonAdd 方法。
我开发free jqGrid fork of jqGrid. I simplified the behavior already in the first version of free jqGrid published in the 2015: see the wiki article。可以像 toppager: true 一样使用 pager: true 并且可以 skip pager parameter in navGrid, inlineNav, navButtonAdd. navGrid 的用法可以是
$('#grid').jqGrid('navGrid', {
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current"
});
在网格的所有寻呼机上添加导航器按钮（顶部、底部或两者）。
免费的 jqGrid 和 Guriddo jqGrid 之间只有一点点不同。还有数百个其他变化。我建议您考虑迁移到免费的 jqGrid，即使您 payed Guriddo jqGrid license. I'd recommend you to read the page 了解有关免费 jqGrid 使用的基本信息。
数据分页不工作，因为你的服务器响应错误。看起来像
{
"page": 1,
"total": 0,
"records": 67,
"rows": [
{ "id": "590a363477336501ad44ab02", "dataObject": "Account", ...},
...
{ "id": "590c97197ad70f00575a310a", "dataObject": "AgreementHistory", ...}
]
}
您使用 datatype: "json" 选项 而没有 loadonce: true 选项，对应 服务器端分页 。这意味着 jqGrid 向 url 发送带有 rows 和 page 参数的请求。发送 jqGrid 的第一个请求将包含 page=1&rows=20（20 是 jqGrid 的 rowNum 参数的默认值）并且服务器 必须 return 20 行或更少行（return 只有一个请求的数据页）。额外的 total 和 records 属性 通知 jqGrid 关于页面和记录的总数。根据 total 参数的值，jqGrid 将 禁用 分页按钮，用户将无法正确进行分页。
另一方面，您的服务器响应包含 错误的值 total 属性 和所有 67 行而不是 20 请求的行。服务响应的其他 47 行将被 jqGrid 忽略。
如果你有场景，记录总数不是很大（比如你的情况下是 67），那么建议添加 loadonce: true 选项（并且 forceClientSorting: true 在使用情况下另外添加免费的 jqGrid) 并将服务器响应修改为
[
{ "id": "590a363477336501ad44ab02", "dataObject": "Account", ...},
...
{ "id": "590c97197ad70f00575a310a", "dataObject": "AgreementHistory", ...}
]
以及网格的 所有行 。 jqGrid 会填充内部的 data 参数，它会在第一次加载数据后自动将 datatype 更改为 "local"。结果分页、排序和 filtering/searching（尝试 navGrid 的 filterToolbar 或 search: true）locally 而无需与服务器进行任何额外通信.它从本质上简化了服务器代码并提高了 jqGrid 的性能。如果您使用足够小的页面大小（如 rowNum: 20 或 rowNum: 10），即使是相对大量的行也可以非常快速地处理。您可以尝试 the demo 每页 60000 行、15 列和 25 行。可以测试分页、排序、过滤的时间。
我对 jQgrid 5.1.0 进行了以下设置：
<div id="grid_container">
<table id="grid"></table>
<div id="gridpager"></div>
</div>
<script type="text/javascript">
$.fn.fmatter.btnFormatter = function (cellValue, options, rowData, addOrEdit) {
var btn =
'<a href="#">' +
'<img class="api_button" data-id="' + options.rowId + '" src="/images/icons/16x16/view.png" alt="Show API Response data" title="Show API Response data" />' +
'</a>' +
'<a href="#">' +
'<img class="error_button" data-id="' + options.rowId + '" src="/images/icons/16x16/view.png" alt="Show errors" title="Show errors" />' +
'</a>';
return btn;
};
$(function () {
$("#grid").jqGrid({
url: '/sf/api-logs',
datatype: "json",
colNames: {{ colNames|raw }},
colModel: {{ colFormats|raw }},
width: 980,
height: 300,
pager: "#gridpager",
toppager: true,
hoverrows: true,
shrinkToFit: true,
autowidth: true,
rownumbers: true,
viewrecords: true,
rowList: [10, 20, 50, 100],
data: [],
rownumWidth: 50,
sortable: true,
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
cell: '',
repeatitems: false
},
loadComplete: function (data) {
if (data.records === 0) {
$("#load_grid").addClass("info_msg").html($("<span>", {
"class": "grid-empty",
"text": "No results were found."
})).delay(800).fadeIn(400);
}
}
}).on('click', '.api_button', function () {
var apiResponseContent = $('#apiResponseContent');
$.ajax({
type: "GET",
url: '/sf/api-logs/api-response',
data: {id: $(this).data('id')},
dataType: 'json',
success: function (data) {
if (typeof data[0].error !== 'undefined') {
apiResponseContent.text(data[0].error);
}
apiResponseContent.text(data[0].apiResponse);
$('#api_dialog').dialog('open');
}
});
return false;
});
$('#api_dialog').dialog({
autoOpen: false,
width: 600,
height: $(window).height() * 0.9,
modal: true,
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
}).show();
});
</script>
但是如下图所示，分页不起作用，刷新网格的小图标也没有显示，我这里做错了什么？
更新
我通过添加以下代码设法显示了 refresh 按钮：
$('#grid').jqGrid('navGrid', '#gridpager', {
edit: false,
add: false,
del: false,
search: false,
refresh: true,
refreshstate: "current"
})
但它只出现在 #gridpagger 如果我也想要它在顶部栏上怎么办？
服务器返回的数据示例如下：https://gist.github.com/reypm/b1d2a303ba471261e55d72bbef099b74
您报告了两个问题：分页不起作用，刷新按钮仅出现在底部分页器上（而不是顶部分页器）。
刷新按钮的问题似乎很简单。您使用 commercial Guriddo，它可能仍然具有使用 jqGrid 4.7 等寻呼机的相同逻辑。旧的 jqGrid 有两个分页器选项：pager 和 toppager，它们的值必须以不同的方式指定。使用 toppager 很容易：可以添加 toppager: true 选项，jqGrid 将生成顶部寻呼机 div 本身并从 true 替换 toppager 的值到新寻呼机的 id 选择器。它将是 toppager: "#grid_toppager"。另一方面，要在网格底部创建寻呼机，必须在 HTML 页面 虚拟 div 的某处创建 ，例如 <div id="gridpager"></div> 并以 pager: "gridpager" 形式使用 pager 参数。 jqGrid 将移动 div 在网格内的另一个地方并用数据填充它。 navGrid、inlineNav、navButtonAdd 等其他方法必须使用 #gridpager 或 "#grid_toppager" 作为参数来创建导航栏并向栏中添加按钮。因此你必须使用像
$('#grid').jqGrid('navGrid', '#grid_toppager', {
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current"
});
或
var $grid = $('#grid'),
topPagerSelector = $grid.jqGrid('getGridParam', 'toppager');
$grid.jqGrid('navGrid', topPagerSelector, {
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current"
});
在首页上创建导航栏并向其添加刷新按钮。或者，您可以使用 navGrid 的 cloneToTop: true 选项将相同的寻呼机添加到两个寻呼机：
$('#grid').jqGrid('navGrid', '#gridpager', {
cloneToTop: true,
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current"
});
如果您只想拥有一个首页寻呼机，则不能使用该选项。您将不得不使用 '#grid_toppager' 和 navButtonAdd 方法。
我开发free jqGrid fork of jqGrid. I simplified the behavior already in the first version of free jqGrid published in the 2015: see the wiki article。可以像 toppager: true 一样使用 pager: true 并且可以 skip pager parameter in navGrid, inlineNav, navButtonAdd. navGrid 的用法可以是
$('#grid').jqGrid('navGrid', {
edit: false,
add: false,
del: false,
search: false,
refreshstate: "current"
});
在网格的所有寻呼机上添加导航器按钮（顶部、底部或两者）。
免费的 jqGrid 和 Guriddo jqGrid 之间只有一点点不同。还有数百个其他变化。我建议您考虑迁移到免费的 jqGrid，即使您 payed Guriddo jqGrid license. I'd recommend you to read the page 了解有关免费 jqGrid 使用的基本信息。
数据分页不工作，因为你的服务器响应错误。看起来像
{
"page": 1,
"total": 0,
"records": 67,
"rows": [
{ "id": "590a363477336501ad44ab02", "dataObject": "Account", ...},
...
{ "id": "590c97197ad70f00575a310a", "dataObject": "AgreementHistory", ...}
]
}
您使用 datatype: "json" 选项 而没有 loadonce: true 选项，对应 服务器端分页 。这意味着 jqGrid 向 url 发送带有 rows 和 page 参数的请求。发送 jqGrid 的第一个请求将包含 page=1&rows=20（20 是 jqGrid 的 rowNum 参数的默认值）并且服务器 必须 return 20 行或更少行（return 只有一个请求的数据页）。额外的 total 和 records 属性 通知 jqGrid 关于页面和记录的总数。根据 total 参数的值，jqGrid 将 禁用 分页按钮，用户将无法正确进行分页。
另一方面，您的服务器响应包含 错误的值 total 属性 和所有 67 行而不是 20 请求的行。服务响应的其他 47 行将被 jqGrid 忽略。
如果你有场景，记录总数不是很大（比如你的情况下是 67），那么建议添加 loadonce: true 选项（并且 forceClientSorting: true 在使用情况下另外添加免费的 jqGrid) 并将服务器响应修改为
[
{ "id": "590a363477336501ad44ab02", "dataObject": "Account", ...},
...
{ "id": "590c97197ad70f00575a310a", "dataObject": "AgreementHistory", ...}
]
以及网格的 所有行 。 jqGrid 会填充内部的 data 参数，它会在第一次加载数据后自动将 datatype 更改为 "local"。结果分页、排序和 filtering/searching（尝试 navGrid 的 filterToolbar 或 search: true）locally 而无需与服务器进行任何额外通信.它从本质上简化了服务器代码并提高了 jqGrid 的性能。如果您使用足够小的页面大小（如 rowNum: 20 或 rowNum: 10），即使是相对大量的行也可以非常快速地处理。您可以尝试 the demo 每页 60000 行、15 列和 25 行。可以测试分页、排序、过滤的时间。