Jquery easyui DataGrid paging details

Because of the project, I used jquery easyui to feel that the interface was good and there were few skin styles, but the official website could not be opened recently, and there was less information, so the demo didn't have the desired effect, today, when I used the DataGrid for paging display, I had to spend a long time and had less information on the Internet. After that, I started to solve the problem by myself:

The DataGrid page contains an additional page control. You only need to obtain the number of records and page displayed on each page of the two parameters automatically submitted by the Page Control in the background. // the current page

Then read the records of the corresponding page number and return the total number of records as follows:

1. below is the displayed dialog box of the DataGrid. I directly use table to display the column header, which is easier to read than writing in Js.

<Table id = "list_data" cellspacing = "0" cellpadding = "0"> <thead> <tr> <TH field = "fldappdept" width = "100"> Department </ th> <TH field = "fldappnode" width = "100"> website </Th> <TH field = "fldappname" width = "100"> name </Th> <th field = "fldappmgr" width = "100"> administrator </Th> <TH field = "fldappnote" width = "100"> comment </Th> <TH field = "fldapptype "width =" 100 "> type </Th> <TH field =" fldtelphone "width =" 100 "> telephone </Th> <TH field =" fldappimg "width =" 100 "> title </Th> <TH field =" fldappmonitor "width =" 100 "> enable monitoring </Th> <TH field =" fldapplevel "width =" 100 "> </Th> </tr> </thead> </table>

2. js code for building a DataGrid

Note: To display the pagination control, the pagination attribute must be true.

// DataGrid initialization $ ('# list_data '). dataGrid ({Title: 'application system list', iconcls: 'icon-edit', // icon width: 700, height: 'auto', nowrap: false, striped: True, border: True, collapsible: false, // whether to fold fit: True, // automatic size URL: 'listapp. action ', // sortname: 'code', // sortorder: 'desc', remotesort: false, idfield: 'fld', singleselect: false, // whether to use pagination: true, // The paging control rownumbers: True, // row number frozencolumns: [[{field: 'ck ', checkbox: true}], toolbar: [{text: 'add', iconcls: 'icon-add', Handler: function () {opendialog ("add_dialog", "add") ;}, '-', {text: 'modify', iconcls: 'icon-edit', Handler: function () {opendialog ("add_dialog", "edit") ;}, '-', {text: 'delete', iconcls: 'icon-delete', Handler: function () {delappinfo () ;}],}); // set the pagination control var P = $ ('# list_data '). dataGrid ('getpager'); $ (P ). pagination ({pagesize: 10, // number of records displayed on each page. The default value is 10 pagelist: [5, 10, 15]. // you can set the list of records on each page. beforepagetext: 'dide', // The Chinese Character afterpagetext: 'pages {pages} page' displayed before the page number text box, displaymsg: 'Current {from}-{to} records total {total} records ',/* onbeforerefresh: function () {$ (this ). pagination ('loading'); alert ('before refresh '); $ (this ). pagination ('loaded ');}*/});

3. data processed by struts2 in the background returns a JSON string

Private jsonobject result; // returned JSON private string rows; // The number of records displayed on each page private string page; // the current page private appservicter ter appservice; Public jsonobject getresult () {return result;} public void setresult (jsonobject result) {This. result = result;} public void setappservice (appservicter ter appservice) {This. appservice = appservice;} Public String getrows () {return rows;} public void setrows (strin G rows) {This. rows = rows;} Public String getpage () {return page;} public void setpage (string page) {This. page = page;}/*** query the application system * @ return */Public String listapp () {system. out. println ("---------------"); // int intpage = integer on the current page. parseint (page = NULL | PAGE = "0 ")? "1": page); // number of entries displayed per page int number = integer. parseint (rows = NULL | rows = "0 ")? "10": rows); // start record per page the first page is 1 The second page is number + 1 int start = (intPage-1) * number; list <tblapp> List = appservice. findbypageapp (START, number); // data on each page, put in list Map <string, Object> jsonmap = new hashmap <string, Object> (); // defines map jsonmap. put ("Total", appservice. getcountapp (); // The total number of records stored by the total key, which is a required jsonmap. put ("rows", list); // The Rows key stores the list result = jsonobject on each page. fromobject (jsonmap); // formatted result must be jsonobject // result = jsonarray. fromobject (jsonmap); Return success ;}

4. Attach the Struts. xml configuration file

<package name="app" extends="json-default">          <action name="listApp" class="appAction" method="listApp">              <result type="json">                  <param name="root">result</param>              </result>          </action>  </package>  

Write this for your convenience or others' reference. If you have any questions, please leave a message ......