前端开发技术栈（插件篇）：datatables

一、Datatables介绍

官网地址：https://datatables.net/

DataTables中文网：http://datatables.club/

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

2、分页，即时搜索和排序。

3、几乎支持任何数据源：DOM，javascript，Ajax 和服务器处理。

4、支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation。

5、各式各样的扩展: Editor, TableTools, FixedColumns….

6、丰富多样的option和强大的API。

7、支持国际化。

8、免费开源。

二、开始使用Datatables

1、下载：

http://datatables.net/releases/DataTables-1.10.12.zip

2、引入库

只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件

3、添加HTML 代码

<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>

4、初始化Datatables

$(document).ready( function () {
        $('#table_id').DataTable();
});

匿名函数方式初始化：

$(document).ready(function(){
        $("#table_id").DataTable();
});

三、Datatables国际化

DataTables 默认的字符是英文，也可以翻译成其他语言或定制的字符。

Datatables中所使用的语言选项是通过 language 来配置的。这是一个对象字符串，通过一个参数来描述Datatables的每个部分，语言选项的配置与其他配置方式完全相同，作为初始化设置的一部分;

1、初始化方式：

language: {

sLengthMenu: “显示 _MENU_ 项结果”,
sSearch:“搜索：” // 或 search:"搜索：“

}

2、引入文件方式：

将语言信息写入文件，并在初始化部分引入。

3、把语言定义在文件中，使用language.url选项来初始化：

language:{
//url:"./localisation/zh_CN.txt"
url:"./localisation/Chinese.json"
}

* 根据需要对Datatables中语言选项进行设置。任何不指定的选项,将使用Datatables中默认值

Chinese.json示例：

{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
    "sFirst": "首页",
    "sPrevious": "上页",
    "sNext": "下页",
    "sLast": "末页"
},
"oAria": {
    "sSortAscending": ": 以升序排列此列",
    "sSortDescending": ": 以降序排列此列"
}
}

四、Datatables属性

4.1、隐藏功能框

1、searching:false 禁用搜索

2、info:false 隐藏显示从几到几(共几条)

3、ordering: false 禁用排序功能自定义序号无效

4、pageLength:1 控制每页显示的条数数字表示条数

5、bPaginate:false 禁用上页下页翻页以及指定显示的条数

6、pagingType:"full_numbers“ 显示首尾页以及上下页

4.2、保存状态

Datatables设置 stateSave选项后，可以保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。

这个状态的保存用了html5的本地储存和session储存，这样更加有效率。如果你的数据是异步获取的，你可以使用 stateSaveCallback和 stateLoadCallback选项.

需要注意的是，这个特性不支持ie6、ie7

默认情况下，这个状态会保存2小时，如果你希望设置的时间更长，通过设置参数 stateDuration来初始化表格，这个参数值也可以控制是本地储存(0~更大)还是session储存(-1)

Datatables设置 stateSave选项初始化后，实现的状态保存

$('#table_id').DataTable( {

stateSave: true

} );

4.3、隐藏列

1、有些数据不希望显示在屏幕上，或者需要什么条件才会显示，被隐藏的列依然是表格的一部分，也可以搜索和访问被隐藏的列的相关内容。

例：Age和Sex两列不显示（隐藏的列不会生成dom，他存在于DT的内部数据中），并且不能被搜索到。

"columnDefs": [

{

"targets": [ 2 ],

"visible": false,

"searchable": false

{

"targets": [ 3 ],

“visible”: false,

”Searchable”:false

}

]

属性

“targets”: [ 2 ] 跟数组下标一样，第一列从0开始

“visible”: false false表示隐藏，true表示显示（默认）

”Searchable”:false false表示不能被搜索到，true表示可以被搜索到（默认）

4.4、columns – ajax数据源

1、Datatables最简单的ajax数据源的用法

$("#table_id2").dataTable({
"ajax":"data/arrays.txt"
});

之所以能不写columns是因为dt默认可以处理数组格式的数据,按照数组的顺序0,1，2……对应第一列，第二列

2、通过使用 columns.dataDT 选项用于告诉Datatables找到每一列的数据源对象中对应的属性。

$(“#table_id”).dataTable({
    “ajax”:“data/objects.txt”,
    columns:[
    {“data”:“name”},
    {“data”:“position”},
    {“data”:“start_date”},
    {“data”:“office”},
    {“data”:“extn”}
    ]});

3、Datatables也可直接接受一个js数组来初始化表格（引入JS文件：<script src="data/data.js"></script>）

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

示例：

数据模型 array：["Tiger Nixon", "System Architect", "2011/04/25", "Edinburgh", "5421"]

数据模型 objects：{ "name": "Tiger Nixon", "position": "System Architect", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }

4.5、columnDefs - 添加列默认值

添加列默认值

作用：为空的格子赋默认值，防止弹出：DataTables Waring。

用法：作为初始化的一个属性

columnDefs:[
    {
        //defaultContent:“”,//赋一个空字符串的值
        defaultContent:“-”,
        targets:“_all”

}

]

_all：表示指定所有列 0：表示第一列（列下标从0开始） -1：表示倒数第一列，负数

4.6、添加滚动条与分页

通过设置paging选项，禁止表格分页(默认是打开的)

1、禁用分页，超过100像素就显示滚动条

paging: false
scrollY: 100 垂直滚动条

pagingType: “full_numbers“ 打开分页

scrollX: true 水平滚动条

4.7、默认排序

在datatables初始化时可以使用order选项指定列怎么排序，order可以接受多个二维数组数据，数组第一个位置表示第几列，第二个位置表示标示asc(升序)或desc(降序)。

例：与数组的下标一样，第一列从0开始，这里表格初始化时，第2列升序，第3列降序

order:[[1,"asc"],[2,"desc"]]

4.8、列渲染

例：把Age列隐藏，通过columns.render方法把Age的值拼接到Name列

columnDefs:[{

render:function(data,type,row){

return data + '('+ row[2]+')';

targets:1

{

visible:false,

targets:[2]

}]

4.9、服务器获取数据源

Datatables有许多方法来获取你的数据，如果你的数据量比较大，这个时候你需要使用服务器模式来处理你的数据。在服务器模式下，所有的分页，搜索，排序等操作，Datatables都会交给服务器去处理。所以每次绘制Datatables，都会请求一次服务器获取需要的数据。

通过配置serverSideDT 这个属性来打开Datatables的服务器模式，下面的例子展示了Datatables打开服务器模式。

1、ajax请求服务器中的数据

方式一：函数名称方式

ajax: {

url:“{{ url_for(‘server_data’) }}“
}

方式二：路由地址方式

ajax: {

url:”/server_data“
}

2、绑定数据源
      columns: [
                { data: “engine”},
                { data: "browser"},
                { data: "time" },
                { data: "name" },
                { data: "number"}
         ]

数据模型：{"engine":"Tiger Nixon", "browser":"System Architect","time":"2011/04/25", "name":"Edinburgh", "number":"5421"}

4.10、添加新列与数据源的绑定

1、ajax请求服务器中的数据

ajax: {

url:"{{ url_for('server_data') }}"
}

2、绑定数据源
columns: [

{ data:null },//不绑定数据源

{ data: "engine"},//绑定数据源
{ data: "browser"},

{ data: "time" },

{ data: "name" },

{ data: "number"}

]

3、添加新列与默认值，解决警告问题

columnDefs:[
{
              targets:6,
              data:"操作",
              render:function (data,type,row) {
                  return "<a title='编辑' class='btn btn-xs btn-info changetype' href='#' >编辑</a>  "+
                                  "<a title='删除' class='btn btn-xs btn-danger' href='#'>删除</a>";
              }
      },
      {
       defaultContent:"",
       targets:"_all"
      }

]，

order:[[5,"asc"]]

上面所有的属性均为DT实例化中的内容

DT 实例化：var dts = $(‘#table_id’).DataTable({});

还可以通过order指定列进行排序：

order 这个配置项的作用是，设置默认的排序列为第6列，升序。

为什么？因为 DT 默认会设置第一列升序排列，既然已经是行号了那就没必要了，所以，还可以指定别的列进行排序。

4、给未绑定数据源列添加索引

自定义序号
dts.on("order.dt search.dt",function(){
        dts.column(0,{
            search:"applied",
            order:"applied"
        }).nodes().each(function (cell,i) {
            cell.innerHTML = i + 1;
        });
    }).draw();

on 为 jQuery 里监听事件的方法，给元素绑定监听事件，这里监听了 order.dt 、search.dt 两个事件，意思是当排序和搜索后，重新生成行号。

dts.column(0,{selector}).nodes() 这个的作用是获取第一列的 DOM 元素，接着用 each 方法遍历，把行号设置进去。这里 {selector} 为 DT 的高级应用。

draw 最后一个重绘方法，生成序号后，重新绘制。DT 的每个操作，包括排序、过滤、翻页还是自己使用API操作这些操作或者是设置了数据都要再调用 draw 方法才行。