DataTables - 使用笔记

DataTables - 使用笔记

Max.Bai

2018-05

对jquery 中datatables控件的使用记录。

1. 显示行号

大部分时候，我们需要显示自动增长的行号，有两种方式，一种在后端写数据的时候就添加进来，前端只是显示，另一种直接在前端显示，数据中并没有行号数据，这里记录的是前端的显示。

      "columns": [
        {
          "data": "name",
          "render": function (data, type, row, meta) {
            return meta.row+1;
          }
        },

meta.row 就是行号了，默认是从0开始

2. 动态更新datatables 数据

当数据源是ajax接口的时候，我们可以通过setinterval 来动态更新数据。

itemtable = $('#datatabletest').DataTable({
      "lengthMenu": [ 30, 50, 100 ],
      "processing": false,
      "serverSide": false,
      "ordering": false,
      "ajax": "/device/resultsteplist?id={{id}}",
      "columns": [
        { "data": "index" },
        { "data": "step_object" },
        { "data": "step_action" },
        { "data": "step_params" },
        { "data": "step_pass" },
        { "data": "result" },
        { "data": "add_time" }
      ]
    });
step_interval = setInterval(function () {
      itemtable.ajax.reload();
    }, 2000);

只需要设置 

itemtable. ajax. reload();

就可以直接更新数据源数据了。

3. 更新datatables数据

这个更新和上面一点的有区别，这个是数据是已经是本地的了，并没有不是ajax 数据源，当更改了本地数据源后，需要列表实时显示修改后的数据时就可以用到。

itemtable. clear(). rows. add(data_row s). draw();

4. 默认排序和是否可以排序

默认排序order 参数，可以设置需要默认排序的列，和排序的方式（desc, asc）

"order" : [[ 0, "asc" ]],

设置列是否可以动态排序 columnDefs,  targets为设置列的序号列表或者_all所有， orderable false 时列旁不可以手动排序，默认所有列都可以排序

"columnDefs" :[{ "orderable" : false, "targets" : "_all"}], //[1,2,3,4,5]}],

取消排序

"ordering" : false,

5. 每页显示条数

设置每页显示多少条和条数选择下拉列表内容

"lengthMenu" : [ 30, 50, 100 ],

6. 列显示render 使用

显示列表时要对源数据进行二次处理后才显示的，需要用到render属性，最常用的就是一行最后面的编辑，删除。

官方文档：https://www.datatables.net/reference/option/columns.render

例子为name列内容为可以点击链接，最后一列为编辑和删除链接。

itemtable = $( '#datatabletest'). DataTable({

"lengthMenu" : [ 30, 50, 100 ],

"processing" : true,

"serverSide" : false,

"ajax" : "{% url 'device:list' %}",

"columns" : [

{ "data" : "id" },

{ "data" : "name",

"render" : function ( data, type, row, meta) {

html = '<a href="/device/dd/'+ row. id+ '">'

+ data + '</a>'

return html;

}

},

{ "data" : "project_name" },

{ "data" : "user" },

{ "data" : "update_time" },

{

"data" : "id",

"render" : function ( data, type, row, meta) {

html = '<a href="/device/casedetail/'+ data+ '"> \r\n <span class="label label-primary"><i class="fa fa-pencil"></i> \r\n Edit</span></a>'

+ '<a href="javascript:void(0);" οnclick="DelItem(' + data + ')"> \r\n <span class="label label-danger"><i class="fa fa-trash-o"></i> \r\n Delete</span></a>'

return html;

}

}

]

});