Two Methods of EasyUI Pagination paging: easyuipagination

Two Methods of EasyUI Pagination paging: easyuipagination

EasyUI's datagrid supports server-side paging, but few official materials are available. The following summarizes the server-side paging mechanisms of the two datagrid, one isDatagrid default mechanism, The other isUse Ajax to retrieve data and populate the Datagrid.

I. Use the default datagrid Mechanism

Background:

Public JsonResult GetQuestionUnit () {// easyui datagrid itself transmits rows and page int pageSize = Convert in the form of post. 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 be in the following format: total and rows var easyUIPages = new Dictionary <string, object> (); easyUIPages. add ("total", questionUn Its. FirstOrDefault () = null? 0: questionUnits. firstOrDefault (). reqCount); easyUIPages. add ("rows", questionUnits); return Json (easyUIPages, JsonRequestBehavior. allowGet);} foreground :( 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: 'dide', // The Chinese Character afterPageText: 'pages {pages} page' displayed before the page number text box, displayMsg: 'Total {total} pieces of data ',});});

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

$(function () {});

If you attempt to call the ('# dgd'). datagrid method using other JS methods, the correct paging results will not be obtained.

As you can see, the url line in the above JS Code is commented out. If we do not need to perform other operations, and we plan to query the data as soon as the page is loaded, we can leave this code uncommented. However, sometimes, url parameters, such as the value of arg1, need to perform some operations on the interface, and then get it through JS Code. At this time, the url should be commented out, and the value should be assigned elsewhere, for example:

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

In the above code, we can assume that a button on the interface is clicked. After the step1Ok method is called, the data will be queried through the url and presented to the UI.

Ii. Use Ajax to obtain data and fill the Datagrid

To achieve greater flexibility, we can use ajax to retrieve data and populate the datagrid without using the default datagrid mechanism, that is, specifying a url. To use this method, you still need to place the ('# dgd'). datagrid method

$(function () {});

The background code remains unchanged. However, when you click a button and call step1Ok, the 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);};

At the first call, three data entries 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 changed, we will go:

GetData (pageNumber, pageSize );

In addition, because we bypassed the original datagrid mechanism for paging, we used our own cover $. messager. progress, and then removed 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 a summary of the two methods of EasyUI Pagination paging introduced by Alibaba Cloud. I hope it will be helpful to you. If you want to learn more, please stay tuned to the help House website!