插件介绍: 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>

用法：
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>

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();//重绘

后台控制层：

 /**     * @(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;    }

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

效果：

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