jQuery插件DataTables分页开发心得体会
写Blog目的：不是为人气，只是留份笔记；啰嗦不要紧，只怕有遗漏，以后想不起来。
官网：https://datatables.net/
中文官网：http://datatables.club/
开发环境：Python3.6.0、Anaconda4.3.1、Django、JetBrainsPyCharm2017.1.5
按我项目的开发过程简单整理。
1、第一版本，无分页。
在此之前有用到过DataTables（更多的是easyui中的Datagrid，另之前服务端是PHP），因此想着前端/客户端差异不大，服务端反正都是按规范格式返回JSON串（Django的代码后续再整理）。另外，刚开始也没想着表格分页，只是有三个字段排序需求（排序已在服务端做好并返回）。
DataTables基础代码：
//表格的HTML代码略过
$('#dtList').DataTable({
"bPaginate":false,//翻页功能
"bInfo":false,//页脚信息
"ordering":false,//不排序
"searching":false,//搜索框，不显示
"bLengthChange":false,//改变每页显示数据数量，不显示
"iDisplayLength":10,//每页默认显示数量（不显示了，这个设置也起不了作用）
"serverSide":true,//服务端
"retrieve":false,//意思是如果已经初始化了，则继续使用之前的Datatables实例。
"ajax":{
"type":"POST",
"url":"/manage/getlist/",
"data":{'csrfmiddlewaretoken':'{{csrf_token}}'},//Django的token值
"dataSrc":function(result){//使用dataSrc属性来设置获取到的数据格式，其值是服务端拼好的key-value（数据字段名称-字段值）【服务端走了弯路，后续有时间再写文章说明】
varjson=JSON.parse(result).data;
returnjson;
}
},
"columns":[//表格要显示的列定义(字段名称做了处理)
{"data":"field0",
"visible":false,
"render":function(data,type,full,meta){
//return''+data+' 2、加上分页功能
第一个程序写好几天后就准备加上分页功能。
DataTables的JSON串格式要求：
{
"draw":n,
"recordsTotal":n,//总记录数
"recordsFiltered":n,//条件过滤后的记录数，与总记录数可能会不同
"data":[{}]//获取到的记录集合
}
按照之前处理easyui中Datagrid组件的经验，得到总记录数，筛选后的记录数等值，拼好JSON串回传就行，客户端可以直接实现分页。
可是，问题来了：draw的值怎么控制？
查了资料，也跟踪了下浏览器的header，知道draw是DataTables本身的一个属性值，每次获取数据时都会向服务端传，不需要改这个值，直接在JSON串中回传就好。试了下，不知道问题出在哪，好像分页也不行，而且总感觉这种控制方法有点累。
换个思路再查资料，就是服务端分页（按需请求相应数据），还真有：django-datatables-view（datatablesfordjango，https://pypi.python.org/pypi/django-datatables-view），按其安装步骤来就好，这样子就不用考虑JSON串几个值怎么拼的问题了，这个组件会做好。
改进后的前端代码：
$('#dtList').DataTable({
"bPaginate":true,//翻页功能
"bInfo":true,//页脚信息
"ordering":true,//开启排序
"searching":false,//搜索框，不显示
"bLengthChange":true,//改变每页显示数据数量，不显示
"aLengthMenu":[[5,10,25,50,-1],[5,10,25,50,"All"]],//每页显示记录菜单选项
"iDisplayLength":10,//每页默认显示数量
"serverSide":true,//开启服务端请求模式
'pagingType':'full_numbers',
"retrieve":true,
"ajax":{//这边就不需要dataSrc属性来处理值了
"type":"GET",
"url":"{%url'scheme_list_json'%}",
"data":{
'sSearch':'',
'csrfmiddlewaretoken':'{{csrf_token}}'},
},
"columns":[//表格要显示的列定义
{"data":0,
"visible":false,
"render":function(data,type,full,meta){
//return''+data+' 排序成功，但问题来了：开启排序功能后，表头行中会有排序的图标，但我们不需要它（只是排序，不需要点击），所以加上上面代码中的drawCallback回调函数，去掉其样式就好。
PS：
有个坑-服务端的回传字段和排序字段的列数一定要一一对应，前端DataTables显示字段columns定义也要按这个顺序来，否则前端排序会乱，如：
#需要显示的字段 columns=['jyjhbid','tzbd','clsc','clzt','jlscrq','jlxgrq','clcz'] #排序 order_columns=['jyjhbid','tzbd','clsc','clzt','jlscrq','jlxgrq','clcz']
刚接触django-datatables-view，以为这两个集合值可以不同，所以。。。。多走了些路。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。