DataTable.js 使用笔记

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

Datatables 灵活易用,具有如下特性:

  • 自动分页
  • 即时搜索
  • 多种排序规则,可自定义任意列排序,也可以多列排序
  • 可对分页样式、搜索框等自定义 CSS
  • 国际化,支持多种语言

……

一、如何使用

实例化

Datatable 的初始化很简单,引入jquery.dataTables.cssjquery.dataTables.jsjquery.js 后使用

$(<selector>).DataTable() 实例化一个表格,完整案例如下,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--引入css-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

<!--引入JavaScript-->
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<!--定义DOM-->
<table id="example" class="display" style="width:100%">

<!--初始化代码-->
<script>
$(document).ready(function() {
let exampleTable = $('#example').DataTable();
});
</script>

值得注意的在 1.10.x 之前是使用 let exampleTable = $('#example').dataTable(); 初始化,dataTable 是一个jQuery 对象,1.10.x 后虽然也对该对象做了兼容但不建议使用,具体的差别可以参见 here

四种数据源

DataTable 的数据源一般可以从如下四种渠道中获得,

  1. 如果表格中已经有数据则 DataTable 的数据源从 DOM 中获取,这是最简单的获取数据的方式;

  2. 可以从 JavaScript 数组或对象中获得,如下案例,

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
    ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
    ];

    $(document).ready(function() {
    $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );

    $('#example').dataTable( {
    "data": dataSet,
    "columns": [
    { "title": "Engine" },
    { "title": "Browser" },
    { "title": "Platform" },
    { "title": "Version", "class": "center" },
    { "title": "Grade", "class": "center" }
    ]
    } );
    } );

    从 JavaScript 数组中获取是通过配置选项中的 data 参数指定,同时需要用 columns 指定表头。

  3. 通过 AJAX 获得,

    1
    2
    3
    4
    5
    $(document).ready(function() {
    $('#example').DataTable( {
    "ajax": 'path/to/dataList.txt'
    } );
    } );

    其中 dataList.txt 是一个如下格式 JSON 对象,

    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
    28
    {
    "data": [
    [
    "Tiger Nixon",
    "System Architect",
    "Edinburgh",
    "5421",
    "2011/04/25",
    "$320,800"
    ],
    [
    "Garrett Winters",
    "Accountant",
    "Tokyo",
    "8422",
    "2011/07/25",
    "$170,750"
    ],
    [
    "Ashton Cox",
    "Junior Technical Author",
    "San Francisco",
    "1562",
    "2009/01/12",
    "$86,000"
    ]
    ]
    }
  4. 除了以上几种方法外,如果数据量比较大,这个时候就需要使用服务器模式(Server-Side)动态获取数据。

    在服务器模式下,所有的分页、搜索、排序等操作,Datatables 都会交给服务器去处理。所以每次绘制Datatables, 都会请求一次服务器获取需要的数据,详细案例请见下文。

二、Server-Side 案例

使用 Server-Side 模式加载数据时,要先使用 serverSide 配置项打开 Server-Side 模式,同时开启 processing 在动态加载数据时会提示用户“数据正在加载,请稍等……”,使用 ajax 选项配置后端处理脚本的路径,

1
2
3
4
5
6
7
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "path/to/handleAjax.php"
} );
} );

分页、搜索、排序等操作都会再次请求服务器获得新的数据源,发送 AJAX 请求时除了手动添加的参数外,DataTable 还会自动添加如下参数,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 用于标记请求
draw: 2
// 表头信息
columns[0][data]: id
columns[0][name]:
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]:
columns[0][search][regex]: false
...
columns[n][search][regex]: false
// 排序规则,如下表示第一个排序规则是:按照第三列(从 0 开始)降序排列
order[0][column]: 2
order[0][dir]: desc
// 分页参数
start: 10
length: 10
// 筛选参数
search[value]:
search[regex]: false

AJAX 响应的数据包中,至少应该包括以下字段,

1
2
3
4
draw: 2  // 标记请求,从请求参数中获取即可
data: [{id: "13155030", date: "2018-07-27", parent_id: "76958474430",…},…] // 表格数据
recordsFiltered: 3236 // 符合筛选条件的总条数
recordsTotal: 3236 // 总条目数

如果服务端处理错误,可以使用 error 返回错误信息,错误信息将在实例化表格时弹窗显示。

参考链接

本文标题:DataTable.js 使用笔记

文章作者:Syncher

发布时间:2018年08月10日 - 10:08

最后更新:2018年08月14日 - 21:08

原始链接:https://0x400.com/2018-08-10-frontend-datatable-js-example.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。