最近闲来无事想研究下数据表格，因为之前接触过layui和bootstrap的数据表格，本着能学多少学多少的学习态度，学习下dataTables的服务端分页配置。特与同学们一块分享下从中遇到的问题和解决方式。

 

与bootstrap的数据表略有不同，在引入相关js后除了必要的DOM节点（<table id="table" class="table table-responsive table-hover"></table>）外我们还需要表头部分，具体就是bootstrap的整张表格都可以通过js渲染，而dataTables的表头部分需要我们自己在页面添加，就像下面这样：

<table id="table" class="table table-responsive table-hover">
   <thead>
       <tr>
          <th>ID</th>
          <th>文件名称</th>
          <th>文件类型</th>
          <th>逻辑地址</th>
          <th>物理地址</th>
          <th>更新人</th>
          <th>更新时间</th>
       </tr>
   </thead>
</table>
                                        

 

我以为dataTable的服务端分页会像bootstrap一样，给他一串url，剩下的交给他，于是我写了如下代码进行表格的初始化工作：

<script type="text/java script" src="static/assets/js/jquery-2.1.0.min.js"></script>
<script type="text/java script" src="static/assets/libs/datatablejs/jquery.dataTables.min.js"></script>

<script type="text/java script">
    initTable();

    function initTable() {
        var language = {"sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "当前第 _START_ 至 _END_ 条记录，共 _TOTAL_ 条", "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项", "sInfoFiltered": "(共 _MAX_ 页)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": {"sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页"}};
        $('#table').DataTable({
            'processing': true,
            'pageLength': 5, // 每页显示条数
            'ajax': '/admin/file/list', //异步请求地址
            'lengthChange': false,
            'searching': false,
            'info': true,
            'autoWidth': false, //自动列宽
            language: language, //国际化
            columns: [{
                data: "id" //绑定后台数据列属相
            }, {
                data: "filename"
            }, {
                data: 'filetype',
                defaultContent: "" //默认值
            }, {
                data: 'logicadress',
                defaultContent: ""
            }, {
                data: 'physicsadress',
                defaultContent: ""
            }, {
                data: 'modifyUser',
                defaultContent: "-"
            }, {
                data: 'modifyTime',
                defaultContent: ""
            }],
            columnDefs: [{ //自定义首列复选框
                targets: [0], //第几列：默认从0开始
                orderable: false, // 是否支持排序
                render: function (id, type, row, meta) {
                    return '<input type="checkbox" name="ids" value=' + id + '><label for="input-' + id + '"></label>';
                }
            }]
        })
    }
</script>

刷新页面结果如下：

咦！！我的数据哪去啦？难道是请求除了问题？

查看控制台，发现请求没问题后台数据也正常接收。

对了，服务端返回数据的格式有问题！！后台数据返回的是自定义JSON，不符合dataTables的默认值规范！！

{"code":"200",
 "msg":null,
 "data":{
　　　　　　"count":7,
　　　　　　"totalPage":2,
　　　　　　"pageSize":5,
　　　　　　"currentPage":1,
　　　　　　"list":[
　　　　　　　　　　　　{"createUser":null,"createTime":"2019-