初识datatables

初识datatables

---

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
Datatables的特性不再进行介绍，本人也是最近做项目用到了datatables的插件，第一次接触datatables。使用前浏览了不少博客，发现这些博客介绍的datatables的参数过于复杂，并不太适合初学者使用。因此，本人直接浏览datatables的官方网站（https://www.datatables.net/）进行学习。官网虽然是英文，但是学习起来更有层次性，有简单到复杂，更适合初学者。经过一番学习，还是成功的运用到了项目之中。使用datatables需要引用相应的js和css，可以到官网下载，目前datatables的版本已经更新至1.10.12。

JavaScript脚本
 $(function(){
           $("#user_table").dataTable({
                "bServerSide": true,     //是否启动服务器端数据导入
                "bFilter" : false,       //是否搜索栏
                "bPaginate": true,       //是否显示分页器
                "bInfo": true,           //是否显示表格的一些信息
                "bJQueryUI": false,      //是否启用JQueryUI风格
                "bLengthChange": true,   //是否显示每页大小的下拉框
                "sPaginationType": "full_numbers", //分页样式
                "sAjaxSource" : "<%=basePath%>sysUser/getUserList.do", //请求数据的URL
                "bProcessing" : true,    //DataTables载入数据时，是否显示‘进度’提示   
                "aoColumnDefs": [        
                    {
                       "aTargets" : [0],   //第1列
                       "mData" : "id",     
                       "mRender" : function(a, b, c, d){
                           return '<input type="checkbox" name="user_list" id="'+ a +'" value="'+ a +'" >';
                       }                       
                    },                    
                    {
                       "aTargets" : [1],   //第2列
                       "mData" : "userName"
                    },  
                    {
                       "aTargets" : [2],   //第3列
                       "mData" : "realName"
                    },     
                    {
                       "aTargets" : [3],   //第4列
                       "mData" : "gender",     
                       "mRender" : function(a, b, c, d){
                           if(a == 0){
                              return "男";
                           }else{
                              return "女";
                           }
                       }                    
                    },
                    {
                       "aTargets" : [4],   //第5列
                       "mData" : "userEmail"
                    },
                    {
                       "aTargets" : [5],   //第6列
                       "mData" : "createDate"
                    },
                    {
                       "aTargets" : [6],   //第7列
                       "mData" : "updateDate"
                    },
                    {
                       "aTargets" : [7],   //第8列
                       "mData" : "userRemark"
                    },
                    {
                       "aTargets" : [8],   //第9列
                       "mData" : "userStatus",
                       "mRender" : function(a, b, c, d){
                           if(a == 1){
                              return '<span class="label label-success radius">已启用</span>';
                           }else{
                              return '<span class="label label-defaunt radius">已停用</span>';
                           }
                       }
                    },
                    {
                       "aTargets" : [9],   //第10列
                       "mRender" : function(a, b, c, d){
                           if(c.userStatus == 1){
                              return '<a style="text-decoration:none" onClick="user_stop(this,' + c.id + ')" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>' +
                                     '<a title="修改" href="javascript:;" onclick="user_edit('+ c.id +')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>' +
                                     '<a title="删除" href="javascript:;" onclick="user_del(this,'+ c.id +')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>';
                           }else{
                              return '<a style="text-decoration:none" onClick="user_start(this,' + c.id + ')" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>' +
                                     '<a title="修改" href="javascript:;" onclick="user_edit('+ c.id + ')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>' +
                                     '<a title="删除" href="javascript:;" onclick="user_del(this,'+ c.id +')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>';
                           }
                       }
                    }       
                ],
                "fnServerParams" : function(aoData) {
                    aoData.push(
                           { "name" : "deptId", "value" : deptId}   //自定义参数
                    );              
                }
           });
       });     

其中，bServerSide和sAjaxSource是最关键的参数，一个是启动服务器端数据导入，另一个是从后台请求数据的URL。fnServerParams是自定义参数，根据业务需要可以添加。前端向后台传递的参数有很多，关键的参数是sEcho、iDisplayStart和iDisplayLength。第一次向后台请求数据sEcho的值是1，第二次向后台请求数据sEcho的值是2，第三次向后台请求数据sEcho的值是3，每请求一次数据sEcho的值会加1，对于这个参数我的理解是相当于告诉浏览器这是一次新的请求。iDisplayStart是起始值，假如前端分页的页大小是10，那么第一次iDisplayStart的值就是0，第二次iDisplayStart的值就是10。iDisplayLength是前端分页的大小，随着页大小变化而变化。

后台接收请求的代码

/**
     * 获取用户列表 create by zhaoheng
     * @param sEcho
     * @param iDisplayStart  起始值
     * @param iDisplayLength 页的大小
     * @param deptId         部门编号
     */
    @RequestMapping("/getUserList")
    public void getUserList(int sEcho, int iDisplayStart, int iDisplayLength, int deptId){
        logger.info("获取用户列表");
        String data = sysUserService.getUserList(sEcho, iDisplayStart, iDisplayLength, deptId);
        //返回数据至页面
        out(data);
    }

后台返回给前端的数据封装格式

/**
     * 将数据对象转换为datatables识别的JSON格式数据
     * @param value 要转成JSON数据的对象
     * @param sEcho 
     * @param total 总记录数
     * @return
     */
    public static String getDataTableJson(Object value, int sEcho, int total){
        Map<String,Object> resultMap = new HashMap<String,Object>();
        resultMap.put("sEcho", sEcho);
        resultMap.put("aaData", value);
        resultMap.put("iTotalRecords", total);
        resultMap.put("iTotalDisplayRecords", total);
        return getJson(resultMap, DEFAULT_DATE_FORMAT);
    }

返回给前端的参数有sEcho是由前端请求数据时发送的（原样返回），aaData是渲染在表格中的数据，iTotalRecords是数据库中的数据总量，iTotalDisplayRecords是展示的数据的总量。

JSP页面

 <body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 用户中心 <span class="c-gray en">&gt;</span> 用户管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="batch_delete()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a href="javascript:;" onclick="user_add('添加用户','','510')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 添加用户</a></span> </div>
    <div class="mt-20">
    <table id="user_table" class="table table-border table-bordered table-hover table-bg table-sort">
        <thead>
            <tr class="text-c">
                <th width="25"></th>
                <th width="80">用户名</th>
                <th width="80">真实姓名</th>
                <th width="90">性别</th>
                <th width="90">邮箱</th>
                <th width="130">创建时间</th>
                <th width="130">更新时间</th>
                <th width="130">备注</th>
                <th width="70">状态</th>
                <th width="100">操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    </div>
</div>
</body>