JavaScript DataTables

DataTables.js: Some Useful Tips

Posted by Gloomymoon on 2017-12-17

DataTables.js: Some Useful Tips

0 Preface

DataTables是一款非常强大的jQuery表格插件，能够为普通的HTML表格添加丰富的交互功能。

1 Setting defaults

为了简化每次初始化表单的参数，可以将一些参数值设置为首选的初始值。DataTables中通过使用为defaults填写扩展方法来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$.extend(true, $.fn.dataTable.defaults, {
    //这里填写自定义的初始参数和值
    "searching": false,   //默认不支持搜索
    "ordering": false,    //默认不允许排序
    "language": {         //默认的语言字符串
        "lengthMenu": "每页显示 _MENU_ 条记录",
        "emptyTable": "没有记录",
        "zeroRecords": "抱歉， 没有找到",
        "info": " 从 _START_ 到 _END_ / 共 _TOTAL_ 条数据 ",
        "infoEmpty": "没有数据",
        "infoFiltered": "(从 _MAX_ 条数据中检索)",
        "loadingRecords": "加载中...",
        "processing":     "处理中...",
        "search":         "搜索：",
        "paginate": {
            "first":      "|<",
            "last":       ">|",
            "next":       ">",
            "previous":   "<"
        },
    },
    //默认的dom格式，dom格式见下节
    "dom": "<'row'<'col-sm-6'><'col-sm-6'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'i><'col-sm-7'p>>"
});

2 DOM

DataTables内置了几个用来控制表单或显示附加信息的元素组件，可以在初始化时通过定义dom参数来选择显示哪些，以及现实的位置和布局。

内置的表单控件如下：

  • l（length）：表示每页显示记录数的控件
  • f（filter）：表示搜索（过滤）输入框控件
  • t（table）：表示表单table元素本身
  • i（information）：表示统计信息展示控件
  • p（pagination）：表示分页控件
  • r（processing）：表示“处理中”信息展示控件

默认情况下dom的值为lfrtip。

为满足表单及控件元素的个性化布局，dom选项支持Markup语法，支持添加自定义的div元素，主要关键语法如下：

  • <和>：表示div元素的开始和结束
  • <"className"和>：表示class属性为className的div元素
  • <"#id"和>：表示id属性为id的div元素
  • <"#id.className"和>：上述两者的组合

因此如果使用Bootstrap样式，可以将dom属性设置为：

1
2
3
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"

生成的HTML结果为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="row">
  <div class="col-sm-6">
    { length }
  </div>
  <div class="col-sm-6">
    { filter }
  </div>
</div>
<div class="row">
  <div class="col-sm-12">
    { table }
    { processing }
  </div>
<div>
<div class="row">
  <div class="col-sm-5">
    { information }
  </div>
  <div class="col-sm-7">
    { pagination }
  </div>
</div>

3 Column rendering

在某些时候，通过ajax方式获得数据填充表单时，需要对某些字段Column或者单元格Cell的HTML元素或值进行变化和加工，这个时候可以使用createdCell事件添加自定义格式化函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var table = $('#table').DataTable({
  "columnDefs": [
      {
          //仅针对第5个列的单元格进行处理
          "targets": [4],
          "createdCell": function (td, cellData, rowData, row, col) {
              if (cellData > 0) {
                  //单元格的显示内容根据数据的值变化
                  $(td).html('运行');
              }
              else {
                  $(td).html('停止');
              }
          }
      }
  ],
});

4 Row created callback

用样的在行创建时也可以调用自定义方法来执行格式化工作：

1
2
3
4
5
6
7
8
$('#table').DataTable( {
    "createdRow": function ( row, data, index ) {
        if ( data[5] * 1 > 1 ) {
            //当第6个列的值>1时，为行添加class
            $('row).eq(5).addClass('danger');
        }
    }
});

在实际使用中，createdCell和createdRow都可以达到同样的效果。

5 Individual column searching

除了全局搜索框以外，DataTables还支持每个列的独立搜索框，搜索框有两种类型：input和select。

Input输入框：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//为每个列添加input元素
$('#table tfoot th').each( function () {
    var title = $(this).text();
    $(this).html( '<input type="text" style="width:100%" />' );
} );
var table = $("table").DataTable();

table.columns().every( function () {
    var that = this;
    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

Select输入框：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$("#table").DataTable( {
  initComplete: function () {
      //仅针对第4、5、6、7、8列添加搜索框
      this.api().columns([3,4,5,6,7]).every( function () {
          var column = this;
          var select = $('<select><option value=""></option></select>')
              .appendTo( $(column.footer()).empty() )
              .on( 'change', function () {
                  var val = $.fn.dataTable.util.escapeRegex(
                      $(this).val()
                  );
                  column
                      .search( val ? '^'+val+'$' : '', true, false )
                      .draw();
              } );
          console.log(column.header());
          column.data().unique().sort().each( function ( d, j ) {
              t = d;
              //第5列搜索框展现和值是不一样的
              if(column.index()==4){
                  t = d=='1'?'运行':'停止';
              }
              select.append( '<option value="'+d+'">'+ t +'</option>' );
          } );
      } );
  }
})

6 Row selection

记录的多重选择实现起来比较简单，通过tr的点击事件添加特定的class，最后通过jQuery的选择class名来获取选中的数据信息：

1
2
3
4
5
6
7
8
9
var table = $('#table').DataTable();

$('#example tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
} );

$('#button').click( function () {
    alert( table.rows('.selected').data().length +' row(s) selected' );
} );

7 Access data thru jQuery selector

如果需要在DataTable对象外部方位内部的数据（而不是HTML的dom对象），例如像一部中多重选中记录后，需要选中记录的内容，可以使用如下方法：

1
data = table.rows( $("#table tbody tr.selected") ).data().toArray();

注意最后data()方法之后需要用toArray()转化一下，就能够获取原始的dict类型的数据对象。

其中rows()方法可以替换成columns()，并且其参数可以用jQuery的选择器来过滤和筛选。

8 Refresh data

在DataTable初始化后，需要动态更新内部数据而不用destroy后重新初始化，有如下两种方法：

A. 使用javascript的数组手动刷新数据：

1
2
3
//通过其他方式获取需要更新的数据
data = [...];
table.clear().rows.add(data).draw();

B. 使用ajax的reload方法自动刷新数据：

1
2
3
4
5
6
7
8
var table = $('#table').DataTable({
    "ajax": {
        url: "/api/getData"
    });

setInterval( function () {
    table.ajax.reload();
}, 5000 );

FEATURED TAGS
JavaScript DataTables