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

2017-07-16

学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址

http://www.jq22.com/jquery-info13734

插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说,直接代码

1.客户端(jsp页面)

 /*这些css为了控制生成的数据和分页的li标签的位置*/
     a {
         text-decoration:none;
         color:black;
         font-weight: bold;
         text-align:center;
     }
     table {
         width:500px;
         height:300px;
         text-align: center;
     }
     #table {
         position:relative;
         top:100px;
     }
     #page {
         height:50px;
         text-align:center;
         position:relative;
         top:100px;
     }
     #page li {
         position:relative;
         left:450px;
     }

     </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>      

 　　　<div id="table"  align="center"></div>  <!--用于显示数据的div-->
   <div id="page" class="page"></div>  <!--div的class要设置成引入的css文件中的.page-->

    <script type="text/javascript">
                 var url ="${pageContext.request.contextPath}/show_list";
                 var $table = $("<table border='2px' id='a' width='300px' height='200px'></table>");
                 var $tr = $("<tr display='none'></tr>");
                 var $td = $("<td>编号</td><td>姓名</td><td>薪水</td><td>部门</td><td>操作</td>");
                 $tr.append($td);
                 $table.append($tr);
                 var datas = null;      //datas,options一定要设置为全局变量,发现不设置成全局,没法使用插件
                 var options = null;
                 var pagelistcount = 6; //每页显示数据个数
             //    var maxentries = 50;   //要显示的数据总量,未进行传递
                 $.ajax({
                     url:url,
                     type:"GET",
                     data:null,
                     dataType:"json",
                     success:function(backdata) {
                         datas = backdata;
                         var a =eval(backdata);
                         options={
                                 "id":"page",     //----显示页码的元素(数据放在哪里)---->上面的div标签
                                 "data":datas,   //-----返回的数据---->json形式
                                 "maxshowpageitem":10,//-----最多显示的页码个数
                                 "pagelistcount":pagelistcount,//-----每页显示数据个数,下面的callback是每个分页插件都有的回调函数
                                 "callBack":function(result){  //----result表示处理好的数据集,比如你设置了pagelistcount为6,那么result就有6条数据
                                  $("#table").append($table);
                                 //遍历生成表格并插入数据
                                 $.each(result,function(index,emp) {
                                         $tr = $("<tr></tr>");
                                         $table.append($tr);
                                         for(var i=0; i<=4; i++) {
                                             $td = $("<td></td>");
                                             $tr.append($td);
                                         }
                                         var $tr = $("table tr");
                                         //解决多生成表格的问题--->总数50,每页6条,最后一页不足6条,这样解决多生成表格的问题
                                         if($tr.size() > result.length) {
                                             $("table tr:gt("+ result.length + ")").remove();
                                         }
                                         var $td = $tr.eq(index+1).find("td");
                                         var info = $(result).get(index);
                                         var $empId = $td.eq(0).text(info.empId);
                                         var $empName = $td.eq(1).text(info.empName)
                                         var $salary = $td.eq(2).text(info.salary);
                                         var $dept = $td.eq(3).text(info.dept.deptName);
                                         var $action = $td.eq(4).html("<a href=${update}?empId=" + info.empId+">修改</a>&nbsp;&nbsp;<a id ='del" + info.empId + "' href='#'>删除</a>");
                                         $("#del" + info.empId).click(function () {
                                             if(window.confirm("确定要删除吗?删除之后无法恢复!!!")) {
                                                 $(this).attr("href","${delete}?empId=" + info.empId);
                                             }
                                         })
                                     });
                                 }
                             };
                          page.init(datas.length,1,options); //执行分页,1表示加载完成后显示为第一页
                     }
                  });
       </script>

   </body>

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返回数据,具体不再赘述

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