【发布时间】：2016-10-17 14:25:05
【问题描述】：
我是 jquery 和 jqgrid 的新手。你能通过一个例子帮助我理解和实现 jqgrid 中的分页吗？下面是到目前为止编写的代码。我设置了所有选项（pager、rowNum、rowList、loadonce: true）
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.11.0.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="Scripts/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<!-- The jQuery UI theme extension jqGrid needs -->
<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready(function() {
LoadEmployees();
});
var ChargeItems = [];
var NewBatchItems = [];
function LoadEmployees() {
debugger;
$("#grps").jqGrid("clearGridData", true);
$("#grps").GridUnload();
$('#grps').jqGrid({
datatype: function() {
debugger;
jQuery.ajax({
type: 'POST',
contentType: 'application/json;charset=utf-8',
datatype: 'json',
data: {},
url: 'JQueryGridExample2.aspx/GetEmployees',
success: function(responseData) {
debugger;
ChargeItems = [];
var NewBatchItems = JSON.parse(responseData.d);
for (var i = 0; i < NewBatchItems.length; i++) {
var item = NewBatchItems[i];
ChargeItems.push({ "EmployeeID": item.EmployeeID, "EmployeeName": item.EmployeeName, "DepartmentName": item.DepartmentName, "DesignationName": item.Designation, "Salary": item.Salary });
}
debugger;
var grid = $("#grps")[0];
grid.addJSONData(ChargeItems);
},
error: function() {
alert("Error with AJAX callback");
}
});
},
colNames: ['EmployeeID', 'EmployeeName', 'DepartmentName', 'Designation', 'Salary'],
colModel: [{ name: 'EmployeeID', index: 'EmployeeID', hidden: true, width: 100 }, { name: 'EmployeeName', index: 'EmployeeName', sortable: false, width: 250 }, { name: 'DepartmentName', sortable: false, index: 'Department', width: 250 }, { name: 'DesignationName', sortable: false, index: 'DesignationName', width: 250 }, { name: 'Salary', index: 'Salary', sortable: false, width: 100}],
height: "auto",
grouping: false,
refreshtext: "refresh",
MultiSelect: false,
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 15, 20, 30],
loadonce: true,
viewrecords: true,
recordtext: "View {0} - {1} of {2}",
emptyrecords: "No records to view",
loadtext: "Loading...",
pgtext : "Page {0} of {1}",
sortname: "EmployeeID",
sortorder: "asc",
jsonReader: {
repeatitems: false,
root: function(obj) { return obj; },
page: function(obj) { return $("#grps").jqGrid('getGridParam', 'page'); },
total: function(obj) { return Math.ceil(obj.length / $("#grps").jqGrid('getGridParam', 'rowNum')); },
records: function(obj) { return obj.length; }
},
caption: "Employee Details Report"
});
jQuery("#grps").jqGrid('navGrid', '#pager', { search: false, refresh: false, edit:false, add:false, del:false });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="grps" border="1"></table>
<div id="pager"></div>
</div>
</form>
</body>
</html>
[WebMethod]
public static object GetEmployees()
{
List<EmployeeVo> objEmpList = new List<EmployeeVo>();
EmployeeController objController = new EmployeeController();
objEmpList = objController.GetEmployeesList();
var jsonLabTests = (JsonConvert.SerializeObject(objEmpList));
return jsonLabTests;
}
【问题讨论】：
-
查看文档中的演示。这可以更好地帮助你。
-
究竟是什么问题？运行上面的代码时数据是否显示，而分页器不显示？
-
是的，数据正在显示...寻呼机也在显示。但是当我点击下一个/上一个按钮时，它不会获取下一组记录
-
更新上述评论：ata 正在显示...寻呼机也在显示。但是当我点击下一个/上一个按钮时，它什么也没做（我希望它会在下一页显示下一组记录）