我使用 jQGrid 和 asp 处理程序在网格中显示记录。客户端分页、搜索和排序一切正常。下面是我的代码。
jQuery("#jQGridDemo").jqGrid({
url: 'http://localhost:58404/JQGridHandler.ashx',
datatype: "json",
colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department', 'Age', 'Salary', "Address", 'Marital Status'],
colModel: [
{ name: '_id', index: '_id', width: 50, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 100, stype: 'text', sortable: true, editable: true },
{ name: 'LastName', index: 'LastName', width: 100, editable: true },
{ name: 'LastSSN', index: 'LastSSN', width: 100, editable: true },
{ name: 'Department', index: 'Department', width: 100, align: "right", editable: true },
{ name: 'Age', index: 'Age', width: 40, align: "right", editable: true },
{ name: 'Salary', index: 'Salary', width: 100, align: "right", editable: true },
{ name: 'Address', index: 'Address', width: 100, sortable: false, editable: true },
{ name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false, editable: true }
],
rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10],
pager: '#jQGridDemoPager',
sortname: '_id',
viewrecords: true,
sortorder: 'asc', //desc
caption: "List Student Details",
editurl: 'http://localhost:58404/JQGridHandler.ashx'
//// ****** here i placed the onPaging: //.......
});
$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{ //EDIT
// height: 300,
// width: 400,
// top: 50,
// left: 100,
// dataheight: 280,
closeOnEscape: true, //Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{
closeAfterAdd: true, //Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true}]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
delData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
},
{//SEARCH
closeOnEscape: true
}
);
现在我需要服务器端分页并尝试使用 Oleg 的代码 answer。我将该 cod 放在 jqgrid 的 editurl 下。
onPaging: function (which_button) {
var pageNumber = $(this).jqGrid("getGridParam", "page");
$(this).setGridParam({ datatype: 'json', page: pageNumber }).triggerHandler("reloadGrid");
},
loadComplete: function (data) {
var $this = $(this);
if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
$this.jqGrid('setGridParam', {
datatype: 'local',
data: data.rows,
page: data.page,
records: data.totalRecords,
total: data.total
});
this.refreshIndex();
if ($this.jqGrid('getGridParam', 'sortname') !== '') {
$this.triggerHandler('reloadGrid');
}
} else {
$this.jqGrid('setGridParam', {
page: $this.jqGrid('getGridParam', 'pageServer'),
records: $this.jqGrid('getGridParam', 'recordsServer'),
lastpage: $this.jqGrid('getGridParam', 'lastpageServer')
});
this.updatepager(false, true);
}
}
在loadComplete数据中包含编号。每页记录数，并显示。但网格没有显示从服务器返回的总记录。显示
view 11 - 20 of 10data.totalRcords我放置
onPaging就我而言，在服务器端..我使用以下代码进行分页，这是一个示例代码及其使用 int pageNumber = // 页码变量 int pageSize //页面大小变量 字符串排序顺序 = string.Empty; // 排序方向变量 字符串排序索引.. 希望对你有帮助
public ErrorLogPagedList GetFixedListOfExceptionLogDetails()
{
var objErrorLogPagedList = new ErrorLogPagedList(); //object to return
var objExceptionLogBa = new ExceptionLogBa(); //Ba layer object
var objGlobal = new Global();
try
{
//get the values from the service call
int pageNumber = Convert.ToInt32(HttpContext.Current.Request["page"]); // variable for page number
int pageSize = Convert.ToInt32(HttpContext.Current.Request["rows"]); //variable for page size
string sortOrder = Convert.ToString(HttpContext.Current.Request["sord"]) ?? string.Empty;
// variable for the sort direction
string sortIndex = Convert.ToString(HttpContext.Current.Request["sidx"]) ?? string.Empty;
// variable for the sort column name
//if the page value is less than 0, then start with 1
if (pageNumber <= 0)
{
pageNumber = 1;
}
//if the page size is less than equal to 0 take default value
if (pageSize <= 0)
{
pageSize = 15;
}
if (objGlobal.IsNotNull())
{
if (objGlobal.CurrentRole.IsNotNull())
{
objErrorLogPagedList.Rows = objExceptionLogBa.GetFixedListOfExceptionLogDetails(pageNumber,
pageSize,
sortOrder,
sortIndex);
long totalNumberOfrecords = objExceptionLogBa.GetTotalNumberOfExceptionRecords();
//variable to get total number of pages
//set the rest of the values for the CategorypagedList object
objErrorLogPagedList.Records = totalNumberOfrecords;
objErrorLogPagedList.Page = pageNumber;
/*if totalnumberofrecords is 7 and page size is 10 then it will return 0 so in that case it will take default value of 1 page*/
if (totalNumberOfrecords/pageSize <= 0)
{
totalNumberOfrecords = 1;
}
else
{
//else if the number of records is 10 then it will return 1
if (totalNumberOfrecords%pageSize == 0)
{
totalNumberOfrecords = totalNumberOfrecords/pageSize;
}
//else if the number of records is 11 then it will return 1, but there should be 2 pages so +1
else
{
totalNumberOfrecords = (totalNumberOfrecords/pageSize) + 1;
}
}
//set the value for total pages
objErrorLogPagedList.Total = totalNumberOfrecords;
}
}
}
catch (Exception ex)
{
}
return objErrorLogPagedList;
}