写Blog目的:不是为人气,只是留份笔记;啰嗦不要紧,只怕有遗漏,以后想不起来。
官网: 中文官网:
开发环境:Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm 2017.1.5
按我项目的开发过程简单整理。
1、第一版本,无分页。
在此之前有用到过DataTables(更多的是easyui中的Datagrid,另之前服务端是PHP),因此想着前端/客户端差异不大,服务端反正都是按规范格式返回JSON串(Django的代码后续再整理)。另外,刚开始也没想着表格分页,只是有三个字段排序需求(排序已在服务端做好并返回)。 DataTables基础代码:
<div class="jb51code">
<pre class="brush:js;">
//表格的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<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>来设置<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>到的数据格式,其值是服务端拼好的key-value(数据字段<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a>-字段值)【服务端走了弯路,后续有时间再写<a href="/tag/wenzhang/" target="_blank" class="keywords">文章</a>说明】
var json = JSON.parse(result).data;
return json;
}
},"columns": [ //表格要<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>的列定义(字段<a href="/tag/mingcheng/" target="_blank" class="keywords">名称</a>做了处理)
{ "data": "field0","visible":false,"render": function ( data,type,full,<a href="/tag/Meta/" target="_blank" class="keywords">Meta</a> ) {
//return '<input type="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"/>';
return data;
}
},{ "data": "field1" },{ "data": "field2",//此列名要与服务端返回的JSON串中的值一致
"render": function ( data,<a href="/tag/Meta/" target="_blank" class="keywords">Meta</a> ) {
return '<div style="text-align:left">'+data+'</div>';
}
},//其余字段定义省略
]
});