原文地址：前端开发技术栈（插件篇）：datatables_datatable插件_SteveRocket的博客-CSDN博客

 一、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文件

        <link rel="stylesheet" href="css/jquery.dataTables.css"/>

        <script src="js/jquery.js"></script>

        <script src="js/jquery.dataTables.js"></script>

3、添加HTML 代码

Column 1Column 2Row 1 Data 1Row 1 Data 2Row 2 Data 1Row 2 Data 2

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、引入文件方式：

       <script src="localisation/International.js"></script>     

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

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、列渲染

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

例：把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 "编辑  "+

"删除";

}

},

{

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 方法才行。

编辑

五、案例：借助Bootstrap美化

使用方法：只需要引入Datatables已经写好的css样式和js即可。

在<table>后面添加：

table table-hover   鼠标悬停的行的背景变为灰色

table table-condensed    减小行间距

向<tr>添加：.success、.error、.warning、.info、 .active、 .danger

编辑

样式1

编辑

样式2

六、总结

1、columns和columndefs的区别：

     1.1、两个参数可以同时使用，但是columns定义的优先级最高，columns先执行，columnDefs后执行。

1.2、columnDefs比columns多一个属性columnDefs.targetsDT，有了这个属性就可以做很多columns做不到的事情。

     1.3、columns：设置特定列的初始化属性，可以定义数组设置多列，数组长度必须等于表格的数量，只想使用默认值可以设为“NULL”，数组每个元素只能设置单列的属性。

     1.4、columnDefs：与columns非常相似，该数组可以针对特定的列，多列或者所有列定义。数组可以任意长度。

通过targets参数设置一个列或者多列，该属性定义可以如下：

0或正整数 - 从左边的列索引计数 

负整数 - 列索引从右边计数

一个字符串 - 类名称将被匹配上的th为列 

“_all”- 所有的列（即指定一个默认值）

示例代码仓库：https://gitee.com/SteveRocket/practice_fronted/tree/master/frontend_plugs_libs/datatables