JQueryPagination分页插件,ajax从struts请求数据

Posted 2020-09-28 code never lies

2017-07-16 

学完了struts2,做了个关于分页的小例子,用到了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>&nbsp;&nbsp;<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

View Code

如果采用用户库的方式添加的话要注意把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返回数据,具体不再赘述

还有问题的话后续再进行补充,欢迎批评指正^_^