<!--一定要引入样式表和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=http://www.mamicode.com/${update}?empId=" + info.empId+">修改</a>&nbsp;&nbsp;<a id =‘del" + info.empId + "‘ href=http://www.mamicode.com/‘#‘>删除");
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   

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

　　private List<Employee> listEmployees;
    //使用json时只需设置get方法
    public List<Employee> getListEmployees() {
        return listEmployees;
    }
    /**
     * 员工列表展示
     * @return
     */
    public String list() {
        listEmployees = employeeService.getAll();//注意赋值
        return "list";
    }