插件介绍: DataTables 表格分页

官网： 
英文：https://datatables.net/ 
中文：http://www.datatables.club/

---

引入文件(结合bootstrap样式)：

        css:
            <link href="statics/css/dataTable/dataTables.bootstrap.min.css" type="text/css" rel="stylesheet">
        js:
            <script src="statics/js/dataTable/jquery.dataTables.min.js" type="text/javascript"></script>
            <script src="statics/js/dataTable/dataTables.bootstrap.min.js" type="text/javascript"></script>
 
 
1
2
3
4
5

用法： 
HTML(以本人项目为例):

<table class="table table-bordered table-hover table-striped" id="dutyListTable">
                            <thead>
                            <tr>
                                <th>选择</th>
                                <th>实际值班人</th>
                                <th>值班日期</th>
                                <th>班次类别</th>
                            </tr>
                            </thead>
                            <tbody id="rewardBody">

                            </tbody>
                        </table>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13

JS（相关配置项）:

  var dutyTable =  $("#dutyListTable").dataTable({

        "destroy" : true,       //销毁表格对象
        "aLengthMenu":[5,10],  //用户可自选每页展示数量 5条或10条
        "searching":false,//禁用搜索（搜索框）
        "lengthChange":true,
        "paging": true,//开启表格分页
        "bProcessing" : true,
        "bServerSide" : true,
        "bAutoWidth" : false,
//                  "sort" : "position",
        "deferRender":true,//延迟渲染
//                  "bStateSave" : false, //在第三页刷新页面，会自动到第一页
//         "retrieve" : true,       //类似单例模式，重复利用以存在对象。
        "iDisplayLength" : 5,
        "iDisplayStart" : 0,

        "select": {
            style:    'os',
            selector: 'td:first-child'
        },
        "ordering": false,//全局禁用排序
        "ajax": {  //ajax方式向后台发送请求
            "type": "POST",
            "url":"mvc/onDuty/find-user-duty",
            "data":{dutyUserId:uid},//传递的数据
            "dataType" : "json"
        },
        "columns" : [//对接收到的json格式数据进行处理，data为json中对应的key
            {"data":"id"},
            {"data" : "actualDutyUser.realName"} ,
            {"data" : "onDutyDate"},
            {"data": "categoryKey.typeName.keyValue"},

        ],
        //渲染
         "columnDefs": [
             {
                 "render": function ( data, type, row ) {
                     return "<input type='radio' name='onDutyToId'  value='" + data + "'>";
                 },
                 "targets": 0 //指定渲染列：第一列(渲染第一列为单选框，data自动匹配为  {"data":"id"}中数据）
             },
         ],
        "oLanguage" : { // 国际化配置
            "sProcessing" : "正在获取数据，请稍后...",
            "sLengthMenu" : "显示 _MENU_ 条",
            "sZeroRecords" : "没有找到数据",
            "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
            "sInfoEmpty" : "记录数为0",
            "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
            "sInfoPostFix" : "",
            "sSearch" : "查询",
            "sUrl" : "",
            "oPaginate" : {
                "sFirst" : "第一页",
                "sPrevious" : "上一页",
                "sNext" : "下一页",
                "sLast" : "最后一页"
            }
        },
//                  initComplete:initComplete,
    });
                // dutyTable.fnDraw();//重绘
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

后台控制层：

 
 
1
2

 /**
     * @(dataTable格式)
     * @param:[onDuty, sEcho, start：开始索引数, length：每页显示数量]
     * @return:java.util.Map<java.lang.String,java.lang.Object>
      */
    @RequestMapping(value="find-user-duty",method=RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> getClassesTeacher(AlertOnDuty onDuty,@RequestParam(value = "sEcho",required = false)Integer sEcho, @RequestParam("start")Integer start,@RequestParam("length")Integer length) {

        this.map = new HashMap<String, Object>();

        //获取分页控件的信息
        this.pageBean = this.getBaseAllService().getOnDutyService().getManOnDutyList(onDuty,start,length);

        map.put("aaData", pageBean.getResult());
        //页数信息配置
        map.put("sEcho", sEcho);
        map.put("iTotalRecords", pageBean.getTotalRow());
        map.put("iTotalDisplayRecords",pageBean.getTotalRow());
        return map;
    }
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

其中：start：开始索引数, length：每页显示数量。sEcho记不清了，可有可无。 
start和length都是向后台发送请求时自带的参数。 
aaData为dataTable接收数据的变量名称，是dataTable默认的。

效果： 

本文只是从实际项目入手讲解，不够系统全面，如想更好使用DataTables建议参考官方文档。