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>

        
　　　　<!--一定要引入样式表和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返回数据,具体不再赘述

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