Summary of two methods of EasyUI Pagination paging

datagrid of EasyUI supports server-side paging, but there are few official data. The following summarizes two server-side paging mechanisms of datagrid, one is the default mechanism of datagrid, and the other is to use Ajax to obtain data and fill Datagrid, which can be used according to the situation.

1: Use the datagrid default mechanism

Backstage:

public JsonResult GetQuestionUnit() 
{ 
// easyui datagrid  Will pass by itself  post  Formal transmission of  rows and page 
int pageSize = Convert.ToInt32(Request["rows"]); 
int pageNum = Convert.ToInt32(Request["page"]);
var dal = new QsQuestionUnitDal(); 
var questionUnits = dal.GetList("",pageNum -1, pageSize); 
//  The values returned to the foreground must include the following format  total and rows 
var easyUIPages = new Dictionary<string, object>(); 
easyUIPages.Add("total", questionUnits.FirstOrDefault() == null ? 0 : questionUnits.FirstOrDefault().ReqCount); 
easyUIPages.Add("rows", questionUnits);
return Json(easyUIPages, JsonRequestBehavior.AllowGet); 
}

 Front Desk: 
(function () {(function () {('#dgd').datagrid({ 
pageNumber: 1, 
//url: "@ViewBag.Domain/Paper/GetQuestionUnit?arg1=xxx", 
columns: [[ 
{ field: 'Id', title: 'id', width: 100 }, 
{ field: 'Name', title: 'name', width: 100 }, 
]], 
pagination: true, 
rownumbers: true,
pageList: [3, 6] 
});
var p = ('#dgd').datagrid('getPager');('#dgd').datagrid('getPager');(p).pagination({ 
beforePageText: ' No. 1 ',// Chinese characters displayed in front of the number of pages text box  
afterPageText: ' Page   Altogether  {pages}  Page ', 
displayMsg: ' Altogether {total} Bar data ',
}); 
});

You need to place the ('# dgd'). datagrid method into the

$(function () {
});

If you attempt to call the ('# dgd'). datagrid method through another JS method, you will not get the correct paging result.

As you can see, line 1 of url in the above JS code has been commented out. If we don't need to do anything else, and Page 1 loads to query out the data, we can not comment out the code. However, often, sometimes, the parameters of url, such as the value of arg1, need to be operated on the interface, and then obtained through JS code. At this time, url should be commented out and assigned elsewhere, such as:

var step1Ok = function () {
$('#dgd').datagrid({ 
url: "@ViewBag.Domain/Paper/GetQuestionUnit?arg1=xxx", 
});
};

In the above code, we can assume that after clicking a button in the interface and calling the method step1Ok, we will go to url to query the data and present it to UI.

2: Use Ajax to get data and populate Datagrid

If we want to pursue greater flexibility, we can not use the default mechanism of datagrid, that is, specify url to obtain data, but use ajax to obtain data and populate datagrid. In this way, you still need to put the ('# dgd'). datagrid method into the

$(function () {
});

The background code remains the same, except that clicking a button and calling the method step1Ok becomes:

var step1Ok = function () {
.messager.progress(title: ' Pleasewaiting ' ,msg: ' Loadingdata... ' ,text: ' PROCESSING....... ' );varp=.messager.progress(title: ' Pleasewaiting ' ,msg: ' Loadingdata... ' ,text: ' PROCESSING....... ' );varp=('#dgd').datagrid('getPager'); 
$(p).pagination({ 
onSelectPage: function (pageNumber, pageSize) { 
alert('onSelectPage pageNumber:' + pageNumber + ',pageSize:' + pageSize); 
getData(pageNumber, pageSize); 
} 
});
getData(1,3);
};

On the first call, you will get three pieces of data on page 1:

getData(1,3);

Then we can see that, at the same time, we also created a time handler for the onSelectPage event of pagination, so that when the page is changed, we will go to:

getData(pageNumber, pageSize);

In addition, due to bypassing the original mechanism of datagrid for paging, we adopted our own covering $. messager. progress, and then uncovered it in success of ajax.

The getData method is as follows:

var getData = function (page, rows) { 
.ajax({ type: "POST", url: "@ViewBag.Domain/Paper/GetQuestionUnit", data: "page=" + page + "&rows=" + rows, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus);.ajax({ type: "POST", url: "@ViewBag.Domain/Paper/GetQuestionUnit", data: "page=" + page + "&rows=" + rows, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus);.messager.progress('close'); 
}, 
success: function (data) { 
//.each(data,function(i,item)//alert(item);//);.each(data,function(i,item)//alert(item);//);.messager.progress('close'); 
$('#dgd').datagrid('loadData', data);
} 
}); 
};

The above is the site to introduce you EasyUI Pagination paging of the two methods of summary of the whole narrative, I hope to help you, if you want to know more content please pay attention to this site website!