插件介绍: DataTables 表格分页

Love The Way You Lie 2022-06-15 12:19 365阅读 0赞

官网：  
英文：[https://datatables.net/][https_datatables.net]  
中文：[http://www.datatables.club/][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（相关配置项）:

后台控制层：

/** * @(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默认的。

![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

效果：  
![这里写图片描述][SouthEast 2]

![这里写图片描述][SouthEast 3]  
本文只是从实际项目入手讲解，不够系统全面，如想更好使用DataTables建议参考官方文档。

[https_datatables.net]: https://datatables.net/
[http_www.datatables.club]: http://www.datatables.club/
[SouthEast]: /images/20220615/b663bdf8e47b459c9476eec7e34d59e5.png
[SouthEast 1]: /images/20220615/e749c2552a9b4c838e5510a84347144b.png
[SouthEast 2]: /images/20220615/8f11302192954af0b3d9a4530d47a810.png
[SouthEast 3]: /images/20220615/fe3d6dcb4c1a483cbc0216c09e97b319.png