2017-07-16
学完了struts,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址
http://www.jq22.com/jquery-info13734
插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说,直接代码
1.客户端(jsp页面)
1 /*这些css为了控制生成的数据和分页的li标签的位置*/
2 a {
3 text-decoration:none;
4 color:black;
5 font-weight: bold;
6 text-align:center;
7 }
8 table {
9 width:500px;
10 height:300px;
11 text-align: center;
12 }
13 #table {
14 position:relative;
15 top:100px;
16 }
17 #page {
18 height:50px;
19 text-align:center;
20 position:relative;
21 top:100px;
22 }
23 #page li {
24 position:relative;
25 left:450px;
26 }
27
28 </style>
css部分
<!--一定要引入样式表和js文件-->
<link rel="stylesheet" type="text/css" href="pagination/page.css">
<script type="text/javascript" src="pagination/jquery.min.js"></script>
<script type="text/javascript" src="pagination/page.js"></script>
1 <div id="table" align="center"></div> <!--用于显示数据的div-->
2 <div id="page" class="page"></div> <!--div的class要设置成引入的css文件中的.page-->
3
4 <script type="text/javascript">
5 var url ="${pageContext.request.contextPath}/show_list";
6 var $table = $("<table border=‘2px‘ id=‘a‘ width=‘300px‘ height=‘200px‘></table>");
7 var $tr = $("<tr display=‘none‘></tr>");
8 var $td = $("<td>编号</td><td>姓名</td><td>薪水</td><td>部门</td><td>操作</td>");
9 $tr.append($td);
10 $table.append($tr);
11 var datas = null; //datas,options一定要设置为全局变量,发现不设置成全局,没法使用插件
12 var options = null;
13 var pagelistcount = 6; //每页显示数据个数
14 // var maxentries = 50; //要显示的数据总量,未进行传递
15 $.ajax({
16 url:url,
17 type:"GET",
18 data:null,
19 dataType:"json",
20 success:function(backdata) {
21 datas = backdata;
22 var a =eval(backdata);
23 options={
24 "id":"page", //----显示页码的元素(数据放在哪里)---->上面的div标签
25 "data":datas, //-----返回的数据---->json形式
26 "maxshowpageitem":10,//-----最多显示的页码个数
27 "pagelistcount":pagelistcount,//-----每页显示数据个数,下面的callback是每个分页插件都有的回调函数
28 "callBack":function(result){ //----result表示处理好的数据集,比如你设置了pagelistcount为6,那么result就有6条数据
29 $("#table").append($table);
30 //遍历生成表格并插入数据
31 $.each(result,function(index,emp) {
32 $tr = $("<tr></tr>");
33 $table.append($tr);
34 for(var i=0; i<=4; i++) {
35 $td = $("<td></td>");
36 $tr.append($td);
37 }
38 var $tr = $("table tr");
39 //解决多生成表格的问题--->总数50,每页6条,最后一页不足6条,这样解决多生成表格的问题
40 if($tr.size() > result.length) {
41 $("table tr:gt("+ result.length + ")").remove();
42 }
44 var $td = $tr.eq(index+1).find("td");
45 var info = $(result).get(index);
46 var $empId = $td.eq(0).text(info.empId);
47 var $empName = $td.eq(1).text(info.empName)
48 var $salary = $td.eq(2).text(info.salary);
49 var $dept = $td.eq(3).text(info.dept.deptName);
50 var $action = $td.eq(4).html("<a href=${update}?empId=" + info.empId+">修改</a> <a id =‘del" + info.empId + "‘ href=‘#‘>删除</a>");
51 $("#del" + info.empId).click(function () {
52 if(window.confirm("确定要删除吗?删除之后无法恢复!!!")) {
53 $(this).attr("href","${delete}?empId=" + info.empId);
54 }
55 })
56 });
57 }
58 };
59 page.init(datas.length,1,options); //执行分页,1表示加载完成后显示为第一页
60 }
61 });
62 </script>
63
64 </body>
65
66
2.服务器
使用了struts并且返回的数据是json格式所以要引入以下jar文件
struts部分 commons-fileupload-1.2.2.jar commons-io-2.0.1.jar commons-lang3-3.1.jar freemarker-2.3.19.jar javassist-3.11.0.GA.jar ognl-3.0.5.jar struts2-core-2.3.4.1.jar xwork-core-2.3.4.1.jar json部分 struts2-json-plugin-2.3.4.1.jar json-lib-2.3-jdk15.jar commons-beanutils-1.7.0.jar commons-collections-3.1.jar ezmorph-1.0.3.jar commons-logging-1.1.1.jar
如果采用用户库的方式添加的话要注意把jar包部署到tomcat中
项目(右击)--->buildPath--->configure build path---->搜索deployment Assembly--->add--->java build path entries
或者直接在webRoot下的lib放jar包然后添加到项目中即可(变成奶瓶!!才可以)
如何让struts返回json文本?
1.包继承 json-default,
2.result中 type="json",params中写好要转换的对象
3.action中一定要为要转换的对象设置get方法,并且要转换的对象不能为null!!
配置文件
<package name="xxxx" extends="json-default">
<action name="show_*" class="employeeAction" method="{1}">
<result name="list" type="json">
<param name="root">listEmployees</param> <!--name="root"获得根级对象,具体自行百度-->
</result>
</action>
action
private List<Employee> listEmployees;
//使用json时只需设置get方法
public List<Employee> getListEmployees() {
return listEmployees;
}
/**
* 员工列表展示
* @return
*/
public String list() {
listEmployees = employeeService.getAll();//注意赋值
return "list";
}
当然除了利用struts返回json也可以直接写个servlet返回数据,具体不再赘述
本人新手一枚,多有不足还望海涵,批评指正!!!
时间： 2024-10-28 02:10:28