JQuery Easyui pagination Common ways to implement pagination _jquery

Easyui's DataGrid supports server-side paging, but with less official information, the following summarizes the server-side paging mechanism of the two DataGrid, which can be used in a specific way.

First, use the DataGrid default mechanism

Background:

Public Jsonresult Getquestionunit () 
{ 
 //Easyui The DataGrid itself passes the rows and page int pageSize in the form of post 
 = 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 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); 

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: ' First ',// The number of Chinese characters 
  afterpagetext: ' page total {pages} page ', 
  displaymsg: ' All {total} data ',}; 
};

You need to put (' #dgd '). The DataGrid method is placed in the

$ (function () {

});

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, using Ajax to get data and fill 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

$ (function () {

});

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:

GetData (1,3);

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", C4/>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);}} 
 ); 

Original address: Http://www.cnblogs.com/luminji

The above is the entire content of this article, I hope to help you learn.