Struts2 Easyui plugin pagination to DataGrid

Test via struts2 jquery pagination to DataGrid instance. The official website uses is ETMVC, very new, the function looks good, but the real development should very few people will be willing to take the risk in own project, does not say that ETMVC is not good, only then most will report has a wait-and-see attitude to treat the new thing. So use STRUTS2 with Easyui.

The first thing to solve is Struts2 's support for JSON, because most of the Easyui's operations on the data are based on JSON. The following are supported using JAR Packs:

Commons-logging-1.0.4.jar, Freemarker-2.3.8.jar, Ognl-2.6.11.jar, Struts2-core-2.0.11.1.jar, Xwork-2.0.4.jar, JSON Plugin-0.32.jar, Json-lib-2.1.jar, Commons-beanutils-1.8.0.jar, Commons-collections-3.2.1.jar, Commons-lang-2.4.ja R, Ezmorph-1.0.6.jar.

Remember that these jars are necessary, and one can not be less yo. ~~

(struts2.1.8 does not recognize Jsonplugin plug-in Jsonplugin-0.32.jar, to the Struts2-json-plugin-2.1.8.1.jar)

And then we'll start looking at the code.

The first is User.java, which is a pojo. No need to say more:

Package Vo;

public class User {
private int id;
Private String username;
private String password;
Here Getter & Setter omitted

......
}

Then the Pageaction.java, because it's just a demo, eager to test the results, so there is no connection to the database, are simulated in the action data.

Package action;

Import java.util.ArrayList;
Import Java.util.HashMap;
Import java.util.List;
Import Java.util.Map;

Import Org.apache.struts2.ServletActionContext;

Import Vo. User;

Import Net.sf.json.JSONObject;

Import Com.opensymphony.xwork2.ActionSupport;
/**
* <p>
* Update:mys (Shi)
* <p>
* Date:2010-5-3 03:59:53
* <p>
* history:1.0
*
* @version 1.0
* @author Mys (Shi)
* @since Java jdk1.6.0_06<br>
* @beanid <br>
*
* Function Description:<br>
*/
public class Pageaction extends Actionsupport {

/**
* @author Shi at 2010-5-3 03:01:35
*/
Private static final long serialversionuid = 7263568517757245698L;
Private Jsonobject result;

@Override
Public String Execute () throws Exception {

int rows = Integer.parseint ((String) servletactioncontext.getrequest ()
. GetParameter ("Rows"));

int page = Integer.parseint ((String) servletactioncontext.getrequest ()
. GetParameter ("page"));

list<user> list = new arraylist<user> ();

User user = null;
for (int i = (page-1) *rows i < rows; i++) {
user = new User ();

User.setid (i);
User.setusername ("Mys" + i);
User.setpassword ("password" + i);

List.add (user);
}

map<string, object> jsonmap = new hashmap<string, object> ();
Total number of pages that the UI needs to display data

Jsonmap.put ("Total", list.size ());

Total number of records that the UI needs to implement data
Jsonmap.put ("Rows", list);

result = Jsonobject.fromobject (JSONMAP);

return SUCCESS;
}

Public Jsonobject GetResult () {
return result;
}

public void Setresult (jsonobject result) {
This.result = result;
}

}

Then there is the configuration file Struts.xml:

<struts>
<package name= "page" namespace= "/" extends= "Json-default" >
<action name= "page class=" action. Pageaction ">
<result type= "JSON" >
<param name= "Root" >result</param>
</result>
</action>
</package>
</struts>

The last is the page.jsp page of the front desk:

<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%>

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<link type= "Text/css" rel= "stylesheet" href= "Easyui/themes/default/easyui.css" >
<link type= "Text/css" rel= "stylesheet" href= "Easyui/themes/icon.css" >
<script type= "Text/javascript" src= "Easyui/jquery-1.3.2.min.js" ></script>
<script type= "Text/javascript" src= "Easyui/jquery.easyui.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' #tt '). DataGrid ({
Title: ' Load Data ',
Iconcls: ' Icon-save ',
width:600,
HEIGHT:250,
URL: ' Page.action ',
columns:[[
{field: ' id ', title: ' Id ', width:80},
{field: ' username ', title: ' Username ', width:80},
{field: ' Password ', title: ' Password ', width:80,align: ' Right '}
]],
Pagination:true
});
});
</script>
<body>
<table id= "tt" ></table>
</body>

<script>
<table id= "tt" ></table>
List display
$ (' #tt '). DataGrid ({
Title: ' Table header list ',
Iconcls: ' Icon-ok ',
width:600,
HEIGHT:250,
URL: ' ${pagecontext.request.contextpath}/json/pageaction ',
Pagesize:5,
PAGELIST:[10,20,30,40,50,60,70,80,100,120,150,200,250,300],
Nowrap:false,
Striped:true,
Collapsible:true,
LOADMSG: ' Data loading ... ',
Sortname: ' Code ',
SortOrder: ' Desc ',
Removesort:false,
Fronzencolumns:[[{field: ' CK ', checkbox:true}]],
columns:[[
{field: ' id ', title: ' Id ', width:80},
{field: ' username ', title: ' Username ', width:80},
{field: ' Password ', title: ' Password ', width:80,align: ' Right '}
]],
Pagination:true,
Rownumbers:true
});

$ (' #tt '). DataGrid (' Getpager '). Pagination ({
Displaymsg: ' Current display of the {from} bar to the {to} records, total {sum} records ',
Showpagelist:true,
Beforepagetext: ' Current section ',
Afterpagetext: ' page, this page has a total of {pages} Records ',
TOTAL:300,
Pagesize:10,
PAGELIST:[10,20,30,40,50,60,70,80,100,120,150,200,250,300],
Onselectpage:function (pagenumber, pageSize) {
$ (this). Pagination (' loading ');
Alert (' pagenumber: ' +pagenumber+ ', pageSize: ' +pagesize ');
$ (this). Pagination (' loaded ');
}
});
</script>