jQuery插件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（數據字段名稱-字段值）【服務端走了彎路，后續有時間再寫文章說明】
 var json = JSON.parse(result).data;
 return json;
 }
 },
 "columns": [ //表格要顯示的列定義(字段名稱做了處理)
 { "data": "field0",
 "visible":false,
 "render": function ( data, type, full, meta ) {
 //return '<input type="checkbox"/>';
 return data;
 }
 },
 { "data": "field1" },
 { "data": "field2" , //此列名要與服務端返回的JSON串中的值一致
 "render": function ( data, type, full, meta ) {
 return '<div style="text-align:left">'+data+'</div>';
 }
 },
 //其余字段定義省略
 ]
 });

{
 "draw": n, 
 "recordsTotal": n, //總記錄數
 "recordsFiltered": n, //條件過濾后的記錄數，與總記錄數可能會不同
 "data": [{}] //獲取到的記錄集合
}

$('#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 '<input type="checkbox"/>';
 return data;
 }
 },
 { "data": 1
 "bSortable":false
 },
 { "data": 2,
 "bSortable":false, //此字段不排序
 "render": function ( data, type, full, meta ) {
 return '<div style="text-align:left">'+data+'</div>';
 }
 },
 //其余字段定義省略
 ......
 ],
 "aaSorting": [ //指定排序的列（索引從0開始）及規則
 [ 8, "asc" ],
 [ 9, "asc" ],
 [ 10, "desc" ]
 ],
 "drawCallback": function( settings ) { //繪制表格時的回調函數
 $("th").removeClass("sorting_asc"); //刪除排序圖標，升序樣式
 $("th").removeClass("sorting_desc");//降序樣式 
 });

 # 需要顯示的字段
 columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz'] 

 # 排序
 order_columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz']