EasyUI's datagrid supports server-side pagination, but there is less official information. The following summarizes two server-side pagination mechanisms of datagrid. One is the datagrid default mechanism , and the other is to use Ajax to obtain data and populate Datagrid , which can be used according to the situation.
1: Use datagrid default mechanism
Backstage:
public JsonResult GetQuestionUnit() { // easyi datagrid itself will pass 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 value returned to the foreground must include 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); } Frontend: (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: 'Things', //The Chinese characters displayed in front of the text box afterPageText: 'Pages in total {pages} pages', displayMsg: 'Total {total} data',}); });You need to place the ('#dgd').datagrid method to
$(function () {});If you attempt to call the ('#dgd').datagrid method through other JS methods, you will not get the correct paging result.
As you can see, the line url in the above JS code has been commented out. If we don't need to do other operations and we plan to query data as soon as the page is loaded, we can not comment out the code. However, often, sometimes, the url parameters, such as the value of arg1, need to perform certain operations on the interface, and then obtain them through JS code. At this time, the url should be commented out and assigned to other places, such as:
var step1Ok = function () {$('#dgd').datagrid({ url: "@ViewBag.Domain/Paper/GetQuestionUnit?arg1=xxx", });};In the above code, we can assume that a button in the interface is clicked and the step1Ok method is called, then the data will be queried to url and presented to the UI.
Two: Use Ajax to obtain data and fill Datagrid
If we want to pursue greater flexibility, we can not use the default mechanism of datagrid, that is, specify the URL to obtain data, but use ajax to obtain data and fill datagrid. In this way, you still need to place the ('#dgd').datagrid method to
$(function () {});The background code remains unchanged, but clicking a button and calling step1Ok method 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);};When the first call is called, 3 pieces of data on the first page will be obtained:
getData(1,3);
Then we can see that, at the same time, we also created a time processor for the onSelectPage event of pagination, so that when the page is another day, we will go to:
getData(pageNumber, pageSize);
In addition, since we bypassed the original mechanism of datagrid for pagination, we adopted our own cover $.messager.progress, and then uncovered the cover in ajax success.
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 complete description of the two methods of EasyUI Pagination paging introduced to you by the editor. I hope it will be helpful to you. If you want to know more, please pay attention to the Wulin.com website!