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);

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

3. 更新datatables数据

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

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

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

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

取消排序

5. 每页显示条数

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

6. 列显示render 使用

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

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

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