原文地址：前端開(kāi)發(fā)技術(shù)棧（插件篇）：datatables_datatable插件_SteveRocket的博客-CSDN博客
?一衙吩、Datatables介紹
官網(wǎng)地址：https://datatables.net/
DataTables中文網(wǎng)：http://datatables.club/
?????? 1淮逊、Datatables是一款jquery表格插件翎碑。它是一個(gè)高度靈活的工具列林，可以將任何HTML表格添加高級(jí)的交互功能左冬。
?????? 2中鼠、分頁(yè)，即時(shí)搜索和排序。
?????? 3蝴簇、幾乎支持任何數(shù)據(jù)源：DOM，javascript匆帚，Ajax 和 服務(wù)器處理熬词。
?????? 4、支持不同主題 DataTables, jQuery UI, Bootstrap, Foundation吸重。
?????? 5互拾、各式各樣的擴(kuò)展: Editor, TableTools, FixedColumns….
?????? 6、豐富多樣的option和強(qiáng)大的API嚎幸。
?????? 7颜矿、支持國(guó)際化。
?????? 8嫉晶、免費(fèi)開(kāi)源骑疆。
二、開(kāi)始使用Datatables
1替废、下載：
????????http://datatables.net/releases/DataTables-1.10.12.zip
2箍铭、引入庫(kù)
????????只需要引入三個(gè)文件即可，jQuery庫(kù)舶担，一個(gè)DT的核心js文件和一個(gè)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();});
匿名函數(shù)方式初始化：
$(document).ready(function(){????????$("#table_id").DataTable();});
三衣陶、Datatables國(guó)際化
????????DataTables 默認(rèn)的字符是英文柄瑰，也可以翻譯成其他語(yǔ)言或定制的字符。
Datatables中所使用的語(yǔ)言選項(xiàng)是通過(guò)?language?來(lái)配置的剪况。 這是一個(gè)對(duì)象字符串教沾，通過(guò)一個(gè)參數(shù)來(lái)描述Datatables的每個(gè)部分，語(yǔ)言選項(xiàng)的配置與?其他配置?方式完全相同译断，作為初始化設(shè)置的一部分;
1授翻、初始化方式：
????language: {
sLengthMenu: “顯示 _MENU_ 項(xiàng)結(jié)果”,
sSearch:“搜索：”? // 或 search:"搜索：“
????}
2、引入文件方式：
?????? <script src="localisation/International.js"></script>?????
?????? 將語(yǔ)言信息寫入文件孙咪，并在初始化部分引入堪唐。
3、把語(yǔ)言定義在文件中翎蹈，使用language.url選項(xiàng)來(lái)初始化：
language:{
//url:"./localisation/zh_CN.txt"
url:"./localisation/Chinese.json"
}
* 根據(jù)需要對(duì)Datatables中語(yǔ)言選項(xiàng)進(jìn)行設(shè)置淮菠。 任何不指定的選項(xiàng),將使用Datatables中默認(rèn)值
Chinese.json示例：
{"sProcessing":"處理中...","sLengthMenu":"顯示 _MENU_ 項(xiàng)結(jié)果","sZeroRecords":"沒(méi)有匹配結(jié)果","sInfo":"顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)","sInfoEmpty":"顯示第 0 至 0 項(xiàng)結(jié)果荤堪，共 0 項(xiàng)","sInfoFiltered":"(由 _MAX_ 項(xiàng)結(jié)果過(guò)濾)","sInfoPostFix":"","sSearch":"搜索:","sUrl":"","sEmptyTable":"表中數(shù)據(jù)為空","sLoadingRecords":"載入中...","sInfoThousands":",","oPaginate": {"sFirst":"首頁(yè)","sPrevious":"上頁(yè)","sNext":"下頁(yè)","sLast":"末頁(yè)"},"oAria": {"sSortAscending":": 以升序排列此列","sSortDescending":": 以降序排列此列"}}
四合陵、Datatables屬性
4.1枢赔、隱藏功能框
1、searching:false?????? 禁用搜索
2拥知、info:false????? ????? ????隱藏顯示從幾到幾(共幾條)
3踏拜、ordering: false ??? 禁用排序功能?? 自定義序號(hào)無(wú)效
4、pageLength:1???????? 控制每頁(yè)顯示的條數(shù)? 數(shù)字表示條數(shù)
5低剔、bPaginate:false????? 禁用上頁(yè)下頁(yè)翻頁(yè)? 以及指定顯示的條數(shù)
6速梗、pagingType:"full_numbers“??????? 顯示首尾頁(yè)以及上下頁(yè)
4.2、保存狀態(tài)
?????? Datatables設(shè)置?stateSave選項(xiàng)后户侥，可以保存最后一次分頁(yè)信息镀琉、排序信息，當(dāng)頁(yè)面刷新蕊唐，或者重新進(jìn)入這個(gè)頁(yè)面屋摔，恢復(fù)上次的狀態(tài)。
?????? 這個(gè)狀態(tài)的保存用了html5的本地儲(chǔ)存和session儲(chǔ)存替梨，這樣更加有效率钓试。如果你的數(shù)據(jù)是異步獲取的，你可以使用?stateSaveCallback和?stateLoadCallback選項(xiàng).?
需要注意的是副瀑，這個(gè)特性不支持ie6弓熏、ie7?
默認(rèn)情況下，這個(gè)狀態(tài)會(huì)保存2小時(shí)糠睡，如果你希望設(shè)置的時(shí)間更長(zhǎng)挽鞠，通過(guò)設(shè)置參數(shù)?stateDuration來(lái)初始化表格?，這個(gè)參數(shù)值也可以控制是本地儲(chǔ)存(0~更大)還是session儲(chǔ)存(-1)?
Datatables設(shè)置?stateSave選項(xiàng)初始化后狈孔，實(shí)現(xiàn)的狀態(tài)保存
$('#table_id').DataTable( {
stateSave: true
} );
4.3信认、隱藏列
1、有些數(shù)據(jù)不希望顯示在屏幕上均抽，或者需要什么條件才會(huì)顯示嫁赏，被隱藏的列依然是表格的一部分，也可以搜索和訪問(wèn)被隱藏的列的相關(guān)內(nèi)容油挥。
例：Age和Sex兩列不顯示（隱藏的列不會(huì)生成dom潦蝇，他存在于DT的內(nèi)部數(shù)據(jù)中），并且不能被搜索到深寥。
?"columnDefs": [
??????{
????????"targets": [ 2 ],
????????"visible":?false,
????????"searchable":?false
??????},
??????{
????????"targets": [ 3 ],
????????“visible”:?false,
??????? ”Searchable”:false
??????}
????]
屬性
“targets”: [ 2 ]??? 跟數(shù)組下標(biāo)一樣攘乒，第一列從0開(kāi)始
“visible”:?false??? false表示隱藏，true表示顯示（默認(rèn)）
”Searchable”:false??? false表示不能被搜索到惋鹅，true表示可以被搜索到（默認(rèn)）
4.4则酝、columns – ajax數(shù)據(jù)源
1、Datatables最簡(jiǎn)單的ajax數(shù)據(jù)源的用法
$("#table_id2").dataTable({
"ajax":"data/arrays.txt"
});
之所以能不寫columns是因?yàn)閐t默認(rèn)可以處理數(shù)組格式的數(shù)據(jù),按照數(shù)組的順序0,1负饲，2……對(duì)應(yīng)第一列堤魁，第二列
2、通過(guò)使用?columns.dataDT?選項(xiàng)用于告訴Datatables找到每一列的數(shù)據(jù)源對(duì)象中對(duì)應(yīng)的屬性返十。
$(“#table_id”).dataTable({
“ajax”:“data/objects.txt”,
columns:[
{“data”:“name”},
{“data”:“position”},
{“data”:“start_date”},
{“data”:“office”},
{“data”:“extn”}
]});
3妥泉、Datatables也可直接接受一個(gè)js數(shù)組來(lái)初始化表格（引入JS文件：<script src="data/data.js">script>）
$('#table_id3').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Engine"},
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version" },
{ "title": "Grade"}
]});
示例：
數(shù)據(jù)模型 array：["Tiger Nixon", "System Architect", "2011/04/25", "Edinburgh", "5421"]
數(shù)據(jù)模型 objects：{ "name": "Tiger Nixon", "position": "System Architect", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }
4.5、columnDefs - 添加列默認(rèn)值
添加列默認(rèn)值
作用：為空的格子賦默認(rèn)值洞坑，防止彈出：DataTables Waring盲链。
用法：作為初始化的一個(gè)屬性
columnDefs:[
{
//defaultContent:“”,//賦一個(gè)空字符串的值
defaultContent:“-”,
targets:“_all”
??? }
]
_all：表示指定所有列?????? 0：表示第一列 （列下標(biāo)從0開(kāi)始）????? -1：表示倒數(shù)第一列，負(fù)數(shù)
編輯
4.6迟杂、添加滾動(dòng)條與分頁(yè)
通過(guò)設(shè)置paging選項(xiàng)刽沾，禁止表格分頁(yè)(默認(rèn)是打開(kāi)的)
1、禁用分頁(yè)排拷，超過(guò)100像素就顯示滾動(dòng)條
paging: false
scrollY: 100??? 垂直滾動(dòng)條
pagingType:?? “full_numbers“?? 打開(kāi)分頁(yè)
scrollX: true??? 水平滾動(dòng)條
4.7侧漓、默認(rèn)排序
?????? 在datatables初始化時(shí)可以使用order選項(xiàng)指定列怎么排序，order可以接受多個(gè)二維數(shù)組數(shù)據(jù)监氢，數(shù)組第一個(gè)位置表示第幾列布蔗，第二個(gè)位置表示標(biāo)示asc(升序)或desc(降序)。
例：與數(shù)組的下標(biāo)一樣浪腐，第一列從0開(kāi)始纵揍，這里表格初始化時(shí)，第2列升序议街，第3列降序
order:[[1,"asc"],[2,"desc"]]
4.8泽谨、列渲染
?????? 在datatables初始化時(shí)可以使用order選項(xiàng)指定列怎么排序，order可以接受多個(gè)二維數(shù)組數(shù)據(jù)特漩，數(shù)組第一個(gè)位置表示第幾列吧雹，第二個(gè)位置表示標(biāo)示asc(升序)或desc(降序)。
例：把Age列隱藏拾稳，通過(guò)columns.render方法把Age的值拼接到Name列
columnDefs:[{
render:function(data,type,row){
return data + '('+ row[2]+')';
},
targets:1
},
{
visible:false,
targets:[2]
}]
4.9吮炕、服務(wù)器獲取數(shù)據(jù)源
????????Datatables有許多方法來(lái)獲取你的數(shù)據(jù)，如果你的數(shù)據(jù)量比較大访得，這個(gè)時(shí)候你需要使用服務(wù)器模式來(lái)處理你的數(shù)據(jù)龙亲。 在服務(wù)器模式下，所有的分頁(yè)悍抑，搜索鳄炉，排序等操作，Datatables都會(huì)交給服務(wù)器去處理搜骡。所以每次繪制Datatables拂盯， 都會(huì)請(qǐng)求一次服務(wù)器獲取需要的數(shù)據(jù)。
????????通過(guò)配置serverSideDT?這個(gè)屬性來(lái)打開(kāi)Datatables的服務(wù)器模式记靡，下面的例子展示了Datatables打開(kāi)服務(wù)器模式谈竿。
1团驱、ajax請(qǐng)求服務(wù)器中的數(shù)據(jù)
方式一：函數(shù)名稱方式
ajax: {
url:“{{ url_for(‘server_data’) }}“
}
方式二：路由地址方式
ajax: {
url:”/server_data“
}
2、綁定數(shù)據(jù)源
columns: [
{ data: “engine”},
{ data: "browser"},
{ data: "time" },
{ data: "name" },
{ data: "number"}
]
數(shù)據(jù)模型：{"engine":"Tiger Nixon","browser":"System Architect","time":"2011/04/25","name":"Edinburgh","number":"5421"}
4.10空凸、添加新列與數(shù)據(jù)源的綁定
1嚎花、ajax請(qǐng)求服務(wù)器中的數(shù)據(jù)
ajax: {
url:"{{ url_for('server_data') }}"
}
2、綁定數(shù)據(jù)源
columns: [
????????{ data:null },//不綁定數(shù)據(jù)源
{ data: "engine"},//綁定數(shù)據(jù)源
{ data: "browser"},
????????{ data: "time" },
????????{ data: "name" },
????????{ data: "number"}
]
3呀洲、添加新列與默認(rèn)值紊选，解決警告問(wèn)題
columnDefs:[
{
targets:6,
data:"操作",
render:function (data,type,row) {
return "編輯? "+
"刪除";
}
},
{
defaultContent:"",
targets:"_all"
}
]，
order:[[5,"asc"]]
上面所有的屬性均為DT實(shí)例化中的內(nèi)容
DT 實(shí)例化：var dts = $(‘#table_id’).DataTable({});
還可以通過(guò)order指定列進(jìn)行排序：
order?這個(gè)配置項(xiàng)的作用是道逗，設(shè)置默認(rèn)的排序列為第6列兵罢，升序。
為什么滓窍？因?yàn)?DT 默認(rèn)會(huì)設(shè)置第一列升序排列卖词，既然已經(jīng)是行號(hào)了那就沒(méi)必要了，所以贰您，還可以指定別的列進(jìn)行排序坏平。
4、給未綁定數(shù)據(jù)源列添加索引
自定義序號(hào)
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 里監(jiān)聽(tīng)事件的方法锦亦，給元素綁定監(jiān)聽(tīng)事件舶替，這里監(jiān)聽(tīng)了?order.dt?、search.dt?兩個(gè)事件杠园，意思是當(dāng)排序和搜索后顾瞪，重新生成行號(hào)。
dts.column(0,{selector}).nodes()?這個(gè)的作用是獲取第一列的 DOM 元素抛蚁，接著用?each?方法遍歷陈醒，把行號(hào)設(shè)置進(jìn)去。這里?{selector}?為 DT 的高級(jí)應(yīng)用瞧甩。
draw?最后一個(gè)重繪方法钉跷，生成序號(hào)后，重新繪制肚逸。DT 的每個(gè)操作爷辙，包括排序、過(guò)濾朦促、翻頁(yè)還是自己使用API操作這些操作或者是設(shè)置了數(shù)據(jù)都要再調(diào)用?draw?方法才行膝晾。
編輯
五、案例：借助Bootstrap美化
使用方法：只需要引入Datatables已經(jīng)寫好的css樣式和js即可务冕。
在<table>后面添加：
table?table-hover?? 鼠標(biāo)懸停的行的背景變?yōu)榛疑?/p>
table?table-condensed??? 減小行間距
向<tr>添加：.success血当、.error、.warning、.info臊旭、 .active落恼、 .danger
編輯
樣式1
編輯
樣式2
六、總結(jié)
1离熏、columns和columndefs的區(qū)別：
???? 1.1领跛、兩個(gè)參數(shù)可以同時(shí)使用，但是columns定義的優(yōu)先級(jí)最高撤奸，columns先執(zhí)行，columnDefs后執(zhí)行喊括。
1.2胧瓜、columnDefs比columns多一個(gè)屬性columnDefs.targetsDT，有了這個(gè)屬性就可以做很多columns做不到的事情郑什。
???? 1.3府喳、columns：設(shè)置特定列的初始化屬性，可以定義數(shù)組設(shè)置多列蘑拯，數(shù)組長(zhǎng)度必須等于表格的數(shù)量钝满，只想使用默認(rèn)值可以設(shè)為“NULL”，數(shù)組每個(gè)元素只能設(shè)置單列的屬性申窘。
???? 1.4弯蚜、columnDefs：與columns非常相似，該數(shù)組可以針對(duì)特定的列剃法，多列或者所有列定義碎捺。數(shù)組可以任意長(zhǎng)度。
通過(guò)targets參數(shù)設(shè)置一個(gè)列或者多列贷洲，該屬性定義可以如下：
0或正整數(shù) - 從左邊的列索引計(jì)數(shù)?
負(fù)整數(shù) - 列索引從右邊計(jì)數(shù)
一個(gè)字符串 - 類名稱將被匹配上的th為列?
“_all”- 所有的列（即指定一個(gè)默認(rèn)值）
示例代碼倉(cāng)庫(kù)：https://gitee.com/SteveRocket/practice_fronted/tree/master/frontend_plugs_libs/datatables
