我正在显示一个jqgrid,其中包含工作正常的数据,并尝试在不起作用的数据之上实现分页。我浏览了这里的示例http://trirand.com/blog/jqgrid/jqgrid.html并尝试实现相同的。
这个很基础,但是我不知道jqgrid是如何神奇地实现分页的。 我看不到分页按钮。 我也包含了 ui.jqgrid.css 文件。
在 $(document).ready 中我调用 InitializeGrid 和completeGrid。 分页立即显示记录。 例如,我将 rowNum 指定为 10,但在显示时显示“View 1-17 of 17”。 相反,我希望它在第一页中显示 10 条记录,在第二页中显示 7 条记录。
下面是我的代码。
代码:
function InitializeGrid() {
jQuery("#sample").jqGrid({
datatype: function(postdata) {
},
pager: '#gridpager',
colNames: colNames,
pgbuttons: true,
colModel: colModel,
hoverrows: false,
hidegrid: false,
shrinkToFit: true,
altRows: true,
scroll: true,
viewrecords: true,
footerrow: false,
gridView: true,
caption: 'Information',
loadonce: false,
sortable: false,
rowNum: 10,
cmTemplate: { title: false },
jsonReader: {
root: "Data",
page: "CurrentPage",
total: "TotalPages",
records: "TotalRecords",
repeatitems: false,
id: "0"
},
});
}
function completeGrid(gridData) {
gridRows = gridData;
var grid = $("#sample ");
grid.clearGridData();
var addRow;
var gridData = { Data: [], CurrentPage: 1, TotalPages: 1, TotalRecords: 1};
for (var i = 0; i < gridRows.length; i++) {
addRow = {
Group: gridRows[i].Group,
Member: gridRows[i].Member
};
gridData.Data.push(addRow);
}
for (var j = 0; j < gridRows.length; j++) {
jQuery('#sample').addRowData( j, gridData.Data[j]);
}
}
在我看来,你也必须在选项中指定
rowList
数组:
rowList:[10,20,30],
并尝试从 json 阅读器中删除尾随的
','
逗号:
jsonReader: {
root: "Data",
page: "CurrentPage",
total: "TotalPages",
records: "TotalRecords",
repeatitems: false,
id: "0"
}, // <----------this comma
如果您的数据是动态传输的,那么您必须使用
loadOnce: true,
这是必需的。
获取数据时需要进行分页。
Asp.net C# 中的示例代码
//Get the page number and page size from query string.
int iPage = int.Parse(Request.QueryString["page"]);//get the requested page
int iLimit = int.Parse(Request.QueryString["rows"]); //get how many rows you want to display
//Taking requires no of records for required page
//using LINQ query.
var Res = res.Skip((iPage - 1) * (iLimit)).Take(iLimit).ToList();