1
jqueryとjqgridを初めて使用しています。 jqgridでページングを理解して実装するのを手助けできますか？以下はこれまでに書かれたコードです。私は（ページャ、たrowNum、rowList、loadonce：真）に設定し、すべてのオプションがあり、このようなあなたの[WebMethod] 1.Makejqgridでページングを行う方法
<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;
}
docsのデモをご覧ください。あなたをより良く助けることができる。 – Jai
問題は何ですか？上記のコードを実行してもページャーが表示されないときにデータが表示されますか？ –
はい、データが表示されています...ページャーも表示されています。しかし、次の/ prevボタンをクリックすると、次のレコードセットを取得しません。 – Karts