DataTable.js 使用笔记

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

Datatables 灵活易用，具有如下特性：

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

……

一、如何使用

实例化

Datatable 的初始化很简单，引入jquery.dataTables.css、 jquery.dataTables.js 和 jquery.js 后使用

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

<!--引入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 的数据源一般可以从如下四种渠道中获得，

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

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

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 指定表头。

通过 AJAX 获得，

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

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

{
    "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"
        ]
    ]
}

除了以上几种方法外，如果数据量比较大，这个时候就需要使用服务器模式（Server-Side）动态获取数据。

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

二、Server-Side 案例

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

$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "path/to/handleAjax.php"
    } );
} );

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

// 用于标记请求
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 响应的数据包中，至少应该包括以下字段，

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

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

一、如何使用

实例化

四种数据源

二、Server-Side 案例

参考链接