Easyui's DataGrid supports server-side paging, but with less official information, the following summarizes the server-side paging mechanism of the two DataGrid, one is the datagrid default mechanism , the other is using Ajax to get data and populate The Datagridcan be used in accordance with the circumstances.
One: Use the DataGrid default mechanism
Background:
Public Jsonresult Getquestionunit () {//Easyui the DataGrid will pass the rows and page int pageSize = Convert.ToInt32 in the form of post
(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 total and rows var easyuipages = new dictionary<string, object> () in the following format. Easyuipages.add ("Total", questionunits.firstordefault () = null 0:questionunits.firstordefault ().
Reqcount);
Easyuipages.add ("Rows", questionunits);
Return Json (Easyuipages, jsonrequestbehavior.allowget); Foreground: (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},]], Pagina
Tion:true, Rownumbers:true, PageList: [3, 6]}); var p = (' #dgd '). DataGrid (' Getpager ');(' #dgd '). DataGrid (' Getpager ');(p). Pagination ({beforepagetext: ' first ',//page textThis box shows the Chinese character afterpagetext: ' page total {pages} page ', displaymsg: ' Altogether {total} piece data ',}; });
You need to put (' #dgd '). The DataGrid method is placed in the
If you attempt to invoke (' #dgd ') through other JS methods. The DataGrid method does not get the correct paging result.
You can see that the above JS code in the URL line is commented out. If we do not need to do anything else, the page is loaded to query the data, you can not comment out the code. However, often, sometimes, the parameters of the URL, such as the value of the arg1 need to do some operation on the interface, and then through the JS code to get, this time, it should be commented out URL, and change from elsewhere to assign values, such as:
var Step1ok = function () {
$ (' #dgd '). DataGrid ({
URL: "@ViewBag. Domain/paper/getquestionunit?arg1=xxx",
});
};
In the above code, we can assume that the point of the interface of a button, called the Step1ok this method, will not go to the URL query data, and rendering to the UI.
Second: Use Ajax to get data and populate the Datagrid
If we want to be more flexible, we can get the data without using the DataGrid's default mechanism, which is to specify the URL, but to get the data through Ajax and populate the DataGrid. In this way, you still need to put (' #dgd '). The DataGrid method is placed into the
The background code does not change, just click on a button, call Step1ok this method, become:
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);
};
The first time you call, you will get 3 data for the first page:
And then we can see that we also created a time processor for the pagination Onselectpage event, so that when we go to another page, we will:
GetData (PageNumber, pageSize);
In addition, by bypassing the original mechanism of the DataGrid for paging, we used our own masking $.messager.progress and then removed the cloaking from the 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:func tion (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 a small set to introduce the Easyui pagination pagination of the two practices summary of the whole narrative, I hope to help you, if you want to learn more content please pay attention to cloud Habitat community website!