jquery Easyui DataGrid Pagination Detailed

Because of the project, with the jquery Easyui feel good interface, skin style less, but the official website has not opened recently, less information, to the demo did not want the effect, today in the DataGrid to do pagination display, toss a half day, online information is relatively small, after their own hands, Finally resolved, nonsense not to say, to begin:

The DataGrid page has an additional paging control that simply gets the two parameters that are automatically submitted by the paging control in the background rows and the number of records displayed per page and page;//current page

Then read the corresponding number of pages of the record, and total record count to return the interface as follows:

1, below is the DataGrid Display dialog box, I directly use table to display the column head, feeling than with JS write to be easy to read

<TableID= "List_data"cellspacing= "0"cellpadding= "0">     <thead>         <TR>             <thField= "Fldappdept"width= "+">Department</th>             <thField= "Fldappnode"width= "+">Website</th>             <thField= "Fldappname"width= "+">Name</th>             <thField= "Fldappmgr"width= "+">Administrator</th>             <thField= "Fldappnote"width= "+">Comments</th>             <thField= "Fldapptype"width= "+">Type</th>             <thField= "Fldtelphone"width= "+">Phone</th>             <thField= "Fldappimg"width= "+">Duties</th>             <thField= "Fldappmonitor"width= "+">Enable monitoring</th>             <thField= "Fldapplevel"width= "+">To re-level</th>         </TR>     </thead> </Table> 

2. JS code for building the DataGrid

Note To display the paging control, the pagination property must be true

$ (function () {//datagrid initializes $ (' #list_data '). DataGrid ({title: ' Application System list ', Iconcls: ' Icon-edit ',//icon width:700, Height: ' Auto ', Nowrap:false, Striped:true, Border:true, coll apsible:false,//whether the fit:true,//automatic size URL is collapsible: ' Listapp.action ',//sortname: ' Code ',//sortor Der: ' Desc ', Remotesort:false, IDfield: ' Fldid ', singleselect:false,//whether radio Pagination:true ,//pagination control rownumbers:true,//line number frozencolumns:[[{field: ' CK ', checkbox:true}], T Oolbar: [{text: ' Add ', Iconcls: ' Icon-add ', handler:function () {Open             Dialog ("Add_dialog", "add");                 }}, '-', {text: ' Modify ', Iconcls: ' Icon-edit ', handler:function () {             OpenDialog ("Add_dialog", "edit");             }}, '-', {text: ' delete ',Iconcls: ' Icon-remove ', handler:function () {delappinfo ();     }         }],     });     Set the paging control var p = $ (' #list_data '). DataGrid (' Getpager '); $ (P). Pagination ({pagesize:10,//shows the number of records per page, by default, PageList: [5,10,15],//can set a list of the number of record bars per page Beforepagetex T: ' first ',///Page text box display of Chinese characters afterpagetext: ' pages total {pages} page ', displaymsg: ' Current display {from}-{to} ' record Total} strips            /*onbeforerefresh:function () {$ (this). Pagination (' loading ');            Alert (' before Refresh ');        $ (this). Pagination (' loaded '); }*/     }); });

3. Backstage I'm returning the JSON string with data processed by struts2

PrivateJsonobject result;//the JSON returned           PrivateString rows;//the number of records displayed per page           PrivateString page;//Current Page           PrivateAppserviceinter Appservice;  PublicJsonobject GetResult () {returnresult; }       Public voidSetresult (jsonobject result) { This. result =result; }       Public voidSetappservice (Appserviceinter appservice) { This. Appservice =Appservice; }              PublicString getRows () {returnrows; }       Public voidsetrows (String rows) { This. rows =rows; }       PublicString GetPage () {returnpage; }       Public voidsetpage (String page) { This. page =page; }          /*** Query Application System *@return      */      PublicString Listapp () {System.out.println ("---------------"); //Current Page        intintpage = integer.parseint (page = =NULL|| page = = "0")? "1":p age); //show number of bars per page        intNumber = Integer.parseint ((rows = =NULL|| rows = = "0")? "10": Rows); //start record for each page the first page is 1 second page is number +1        intStart = (intPage-1) *Number ; List<TblApp> list = Appservice.findbypageapp (Start,number);//data per page, put in listmap<string, object> jsonmap =NewHashmap<string, object> ();//Define MapJsonmap.put ("Total", Appservice.getcountapp ());//Total key to store the number of records, must beJsonmap.put ("Rows", list);//rows button to store a list of records per pageresult = Jsonobject.fromobject (JSONMAP);//formatting result must be Jsonobject//result = Jsonarray.fromobject (JSONMAP);         returnSUCCESS; }  

4. Attach Struts.xml configuration file

< Packagename= "App"extends= "Json-default">          <Actionname= "Listapp"class= "Appaction"Method= "Listapp">              <resulttype= "JSON">                  <paramname= "root">Result</param>              </result>          </Action>  </ Package>  

Close-up these, convenient for themselves or others later reference, if there is any problem we can leave a message ...

This article transferred from: http://www.cnblogs.com/huozhicheng/archive/2011/09/27/2193605.html

jquery Easyui DataGrid Pagination Detailed