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':'','location':'58security','agent_state':'OK','system':'windows'},
{'ip':'192.168.1.92','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},
{'ip':'192.168.1.93','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},
{'ip':'192.168.1.94','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},
{'ip':'192.168.1.95','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},
{'ip':'192.168.1.96','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},
{'ip':'192.168.1.97','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},
{'ip':'192.168.1.98','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},
{'ip':'192.168.1.99','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},
{'ip':'192.168.1.100','online_state':'运行中','machine_id':'','location':'58security','agent_state':'OK','system':'windows'},
]
response = {'data':data,'limit':10,'page':10,'total':100}
return JsonResponse(response)
在 ajax success中接收这些数据，再进行封装、传入datatables回调函数，从而完成渲染。
其中，显而易见，data以 “字段”:"内容"的形式存在于字典中。
5. 自定义搜索(version2)
(上一次写的太丑了)
由此，基本已经完成。
但是原生的搜索是不能用了，所以要自定义搜索。
也找不到添加 <input>框的接口，所以，用jquery遍历搜索再添加<input>元素、绑定事件。
绑定的事件要做什么事呢？
最简单的就是让datatables执行一次提交ajax，这里使用 datatables对象的draw()函数。
JS代码：
function search(){
table.draw();
}
var search_input = $('#search_input_html').text();
$("#dynamic-table_wrapper").find(".row").first().find(".col-sm-6").last().append(search_input);
$('#searcy_type').html($('#search_type').text());
$("#search_button").click(function(){
search();
});
$("#search_key").keydown(function(e){
if(e.keyCode == 13){
search();
}
})
其中插入的代码用textarea包裹起来，再用val取代码
<!--ADDING HTML start-->
<textarea id="search_input_html" style="display:none">
<div class="my_dataTables_filter">
<div class="span6">
<select id="searcy_type" class="search_type">
<select>
<input id="search_key" class="search_space"></input>
<button type="button" id="search_button" class="search_button btn">搜索</button>
</div>
</div>
</textarea>
<textarea id="search_type" style="display:none">
<option value="ip">ip</option>
<option value="online_status">online_status</option>
<option value="machine_id">machine_id</option>
</textarea>
<!--ADDING HTML end-->
样式CSS：
.my_dataTables_filter {
float: right;
}
.search_space{
height:34px;
position: relative;
top:2px;
left:4px;
}
.search_button{
width: 50px;
height: 34px;
color: #fff;
/*font-size:20%;*/
letter-spacing: 1px;
background: #65CEA7;
border-bottom: 2px solid #65CEA7;
/*background: #3385ff;*/
/*border-bottom: 2px solid #2d78f4;*/
outline: medium;
-webkit-appearance: none;
-webkit-border-radius:;
}
.search_type{
height:34px;
position: relative;
top:2px;
left:4px;
}
在初始化结束后，加入这段JS代码（HTML写在content部分；CSS放在.css中）：遍历、添加元素、绑定事件、事件为datatables发出ajax。
draw()默认参数为true，表明刷新时会跳转到第一页重新刷新；draw(false) 则保持在原页。
同时，搜索的值也要传递给服务端：在封装数据时加入
param.search_key = $("#search_key").val()
参考——重要程度由高到低：
2. 引导我做demo的文章 jQuery Data Tables 插件自定义Ajax分页实现
一脸懵时可以做一个demo，后端数据返回，form完成，再一步步做转移。