最近闲来无事想研究下数据表格,因为之前接触过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-