DataTables - 使用笔记

最新推荐文章于 2023-01-04 01:15:49 发布

原创最新推荐文章于 2023-01-04 01:15:49 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datatables #jquery

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用 jQuery 中的 DataTables 插件实现行号显示、动态更新数据、更新本地数据、默认排序及列显示等常见功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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_rows).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\nEdit</span></a>'
              + '<a href="javascript:void(0);" onclick="DelItem(' + data + ')">\r\n<span class="label label-danger"><i class="fa fa-trash-o"></i>\r\nDelete</span></a>'
            return html;
          }
        }
      ]
    });