写Blog目的：不是为人气，只是留份笔记；啰嗦不要紧，只怕有遗漏，以后想不起来。

官网： 中文官网：

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="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>来设置<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>到的数据格式，其值是服务端拼好的key-value（数据字段<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>-字段值）【服务端走了弯路，后续有时间再写<a href="https://www.jb51.cc/tag/wenzhang/" target="_blank" class="keywords">文章</a>说明】
        var json = JSON.parse(result).data;
        return json;
      }
    },"columns": [ //表格要<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>的列定义(字段<a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a>做了处理)
      { "data": "field0","visible":false,"render": function ( data,type,full,<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> ) {
          //return '<input type="check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"/&gt;';
          return data;
        }
      },{ "data": "field1" },{ "data": "field2",//此列名要与服务端返回的JSON串中的值一致
        "render": function ( data,<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> ) {
          return '<div style="text-align:left"&gt;'+data+'</div>';
        }
      },//其余字段定义省略
      ]
    });