datatables后端分页
Posted huim
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了datatables后端分页相关的知识，希望对你有一定的参考价值。
0x01 缘由
平时较少涉及前端，这次本以为模板中有表单，分页跳转搜索功能都比较齐全，可以高枕无忧，但是细看模板中的分页跳转是不需要与后台交互的，数据一次性写在前端，再有前端插件完成分页。
这种方式肯定是不可行的，这次要做的可以看做资产管理，服务器+主机量级很大，一个机器生成一条 <th>，第一次请求的前端代码怕是要崩掉。
所以合理采用的还是后端分页
0x02 分页方式
团队项目里看过的几种后端分页方式：
1. Paginator + render渲染整个页面，这种方式比较好理解，但是每一次跳转分页，都会替换掉整块main-content部分。
2. datatables 后端分页，这种方式按照datatables提供的API填写相关信息与逻辑，缺点是
1) 受限于这种插件的条条框框，要自定义一些内容有点麻烦。
比如原始datatables中search是实时的，即在search input框中输入 "123"，会进行 "1"、"12"、"123"三次过滤，在后端分页中，就会发起三次查询。
所以要自定义搜索，但是form部分是由datatables初始化过程中生成的，找半天没有找到插入自定义<input>框的接口。所以用jquery遍历再添加 <input>。
2) 文档不太清晰
各种API、接口，在文档中找来找去挺麻烦的。等到整块写的差不多的时候，才意外看到官方后端分页的文档。
3. 自己编写form、跳转、查询、排序、每页数量等功能，就是稍显麻烦，但还是挺灵活的。
0x03 datatables后端分页流程
由于模板本身的表单是基于datatables的，所以最后还是修改了datatables。
datatables后端分页的流程大概可以分为四部分：
1. 修改datatables的初始化参数，改为后端分页，并修改其他设置
2. datatables传递数据给服务端
3. 接收服务端数据，比如说取到第10页的10条json数据
4. 数据渲染至datatables当前页面
0x04 修改datatables初始化参数
<script type="text/javascript"> $(function () { //提示信息 var lang = { "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": "末页", "sJump": "跳转" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }; //初始化表格 var table = $("#dynamic-table").dataTable({ language:lang, //提示信息 autoWidth: false, //禁用自动调整列宽 stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合 processing: true, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //禁用原生搜索 orderMulti: false, //启用多列排序 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers columnDefs: [{ "targets": ‘nosort‘, //列的样式名 "orderable": false //包含上样式名‘nosort’的禁止排序 }] }).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象 }); </script>
datatables初始化中，以字典的形式将初始化信息传递进去。
其中，language为表单的一些提示信息。这里比较简单，基本上看看就明白。
所以，现在表单已经初始化成了后端模式了。
接下来，怎么给后端传递数据
0x05 前后端数据交互
需要增加的两个值：ajax 与 column
<script type="text/javascript"> $(function () { //提示信息 var lang = { "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": "末页", "sJump": "跳转" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }; //初始化表格 var table = $("#dynamic-table").dataTable({ language:lang, //提示信息 autoWidth: false, //禁用自动调整列宽 stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合 processing: true, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false, //禁用原生搜索 orderMulti: false, //启用多列排序 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui pagingType: "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers columnDefs: [{ "targets": ‘nosort‘, //列的样式名 "orderable": false //包含上样式名‘nosort’的禁止排序 }], ajax: function (data, callback, settings) { //封装请求参数 console.log(data); var param = {}; param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候 param.start = data.start;//开始的记录序号 param.page = (data.start / data.length)+1;//当前页码 param.order = data.order[0] //console.log(param); //ajax请求数据 $.ajax({ type: "GET", url: "http://your_server", cache: false, //禁用缓存 data: param, //传入组装的参数 dataType: "json", success: function (result) { console.log(result); //setTimeout仅为测试延迟效果 setTimeout(function () { //封装返回数据 var returnData = {}; returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回 returnData.recordsTotal = result.total;//返回数据全部记录 returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果 returnData.data = result.data;//返回的数据列表 //console.log(returnData); //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染 //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕 callback(returnData); }, 200); } }); }, //列表表头字段 columns: [ { "data": "ip" }, { "data": "online_state" }, { "data": "machine_id" }, { "data": "location" }, { "data": "agent_state" }, { "data": "system" } ] }).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象 }); </script>
1. ajax: function(data,callback,settings){}——data
data为datatables本身会提供的数据集合，包含每一列的信息、一页的数据量（一页几行）、查找的值、当前页等，另外根据datatables的初始化选择还会包含其他内容，比如，当点击排序时，data中将包含排序的列、方式。
想要传递给服务端的数据，可以在这一处取。但是最好将数据重新封装一遍再发送给服务器，原因是：
1) 有的数据是不需要的，比如在原生搜索关闭的情况下，data中还是会以后search的信息
2) 有一些自定义的信息，比如自定义搜索框，可以封装入其中再传给服务器
3) 整理格式，比如 排序数据 order中， order[0] 包含排序的列和方式，其他没什么用，所以取出order[0] 封装再发送，简洁得多。
数据封装完毕，则采用ajax的方式将数据发送给服务端。
2. ajax: function(data,callback,settings){}——callback
callback为返回给datatables渲染当前表单的数据，以字典形式。
其中，draw与data中的draw相同。
recordsTotal、recordsFiltered填写为数据库总数据量即可，datatables从中获取数据总量、分页数量等。
渲染的核心数据 data，是给表单渲染内容用的。
3. columns字段
columns字段的作用是：
将回调函数中的data中的数据，按columns的排序渲染入表单列中，比如这里，第一列为ip，则将data[‘ip‘] 放到第一列中，以此类推。
4. 后端返回什么数据
后端的数据可以根据传递给回调函数的数据进行猜测拼接，但是data也是字典格式的，返回的数据用Python可以写为：
data = [ {‘ip‘:‘192.168.1.91‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘91‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, {‘ip‘:‘192.168.1.92‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘92‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, {‘ip‘:‘192.168.1.93‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘93‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, {‘ip‘:‘192.168.1.94‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘94‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, {‘ip‘:‘192.168.1.95‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘95‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, {‘ip‘:‘192.168.1.96‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘96‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, {‘ip‘:‘192.168.1.97‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘97‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, {‘ip‘:‘192.168.1.98‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘98‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, {‘ip‘:‘192.168.1.99‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘99‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, {‘ip‘:‘192.168.1.100‘,‘online_state‘:‘运行中‘,‘machine_id‘:‘100‘,‘location‘:‘58security‘,‘agent_state‘:‘OK‘,‘system‘:‘windows‘}, ] response = {‘data‘:data,‘limit‘:10,‘page‘:10,‘total‘:100} return JsonResponse(response)
在 ajax success中接收这些数据，再进行封装、传入datatables回调函数，从而完成渲染。
其中，显而易见，data以 “字段”:"内容"的形式存在于字典中。
5. 自定义搜索
由此，基本已经完成。
但是原生的搜索是不能用了，所以要自定义搜索。
也找不到添加 <input>框的接口，所以，用jquery遍历搜索再添加<input>元素、绑定事件。
绑定的事件要做什么事呢？
最简单的就是让datatables执行一次提交ajax，这里使用 datatables对象的draw()函数。
function search(){ table.draw(); } var search_input = "<div class="dataTables_filter"><div class="span6"><input id="search_key"></input><button type="button" id="search_button" >搜索</button></div></div>"; $("#dynamic-table_wrapper").find(".row").first().find(".col-sm-6").last().append(search_input); $("#search_button").click(function(){ search(); }); $("#search_key").keydown(function(e){ if(e.keyCode == 13){ search(); } })
在初始化结束后，加入这段：遍历、添加元素、绑定事件、事件为datatables发出ajax。
draw()默认参数为true，表明刷新时会跳转到第一页重新刷新；draw(false) 则保持在原页。
同时，搜索的值也要传递给服务端：在封装数据时加入
param.search_key = $("#search_key").val()
参考——重要程度由高到低：
2. 引导我做demo的文章 jQuery Data Tables 插件自定义Ajax分页实现
一脸懵时可以做一个demo，后端数据返回，form完成，再一步步做转移。
以上是关于datatables后端分页的主要内容，如果未能解决你的问题，请参考以下文章
Django中使用JS通过DataTable实现表格前端分页，每页显示页数，搜索等功能
如何在 ASP.net Core 中实现 dataTables 服务器端分页/搜索/排序