jquery.dataTables的摸索之路-服务端分页配置

最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置。特与同学们一块分享下从中遇到的问题和解决方式。与bootstrap的数据表略有不同,在引入相关js后除了必要的DOM节点(<tableid="table"class="tabletable-responsivetable-hover"...

jquery.dataTables的摸索之路-服务端分页配置

最近闲来无事想研究下数据表格,因为之前接触过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/javascript" src="static/assets/js/jquery-2.1.0.min.js"></script><script type="text/javascript" src="static/assets/libs/datatablejs/jquery.dataTables.min.js"></script>
<script type="text/javascript"> 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-05-28T14:24:56.000 0000","modifyUser":10000001,"modifyTime":"2019-05-09T14:24:59.000 0000","id":7,"filename":"女王大人","filetype":3,"logicadress":"www","physicsadress":"E:/test.txt","sort":"99"},
            {"createUser":null,"createTime":"2019-05-28T14:24:54.000 0000","modifyUser":10000001,"modifyTime":"2019-05-08T14:25:02.000 0000","id":6,"filename":"你的皇帝","filetype":2,"logicadress":"www","physicsadress":"E:/test.txt","sort":"99"},
            {"createUser":null,"createTime":"2019-05-28T14:24:51.000 0000","modifyUser":10000001,"modifyTime":"2019-05-07T14:25:04.000 0000","id":5,"filename":"阿里斯嘉","filetype":0,"logicadress":"www","physicsadress":"E:/test.txt","sort":"99"},
            {"createUser":null,"createTime":"2019-05-28T14:24:49.000 0000","modifyUser":10000001,"modifyTime":"2019-05-06T14:25:07.000 0000","id":4,"filename":"马大哈","filetype":1,"logicadress":"www","physicsadress":"E:/test.txt","sort":"99"},
            {"createUser":null,"createTime":"2019-05-28T14:24:46.000 0000","modifyUser":10000001,"modifyTime":"2019-05-05T14:25:09.000 0000","id":3,"filename":"土豆司","filetype":1,"logicadress":"www","physicsadress":"E:/test.txt","sort":"99"}
          ],
      "sort":null,
      "order":null
     }
}

我在服务端封装了返回的数据,导致dataTables不知道从哪下手!

在找到问题所在后,结合百老师的各种博客找到了解决的办法:改造‘ajax’属性

$('#table').DataTable({...'ajax': { url: '/admin/file/list', dataSrc: function (json) {  return json.data.list; //指定返回数据列的位置,该数据列为数组形式 }},... })
源文地址:https://www.guoxiongfei.cn/cntech/19249.html