Datatables--一款jQuery表格外掛
Datatables是一款強大的jquery表格外掛。它是一個高度靈活的工具，可以將任何HTML表格新增高階的互動功能。
主要特點：
自動分頁處理
即時表格資料過濾
資料排序以及資料型別自動檢測
自動處理列寬度
可通過CSS定製樣式
支援隱藏列
易用
可擴充套件性和靈活性
國際化
動態建立表格
免費的
DataTables的使用很簡單，只需要引入兩個檔案，一個css樣式檔案和DataTables本身的指令碼檔案。
1. <!--引入css--> 2. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> 3. 4. <!--引入JavaScript--> 5. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 6. <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 7. 8. <!--初始化程式碼--> 9. <script> 10. $(document).ready(function() { 11. $('#example').DataTable(); //"#example"是表格的id 12. }); 13. </script>
datatables預設的佈局也可以通過dom選項來修改；
datatables定義了10個字元表示不同的元件，除了t以外，其他選項可以指定多次，
* l - Length changing 每頁顯示多少條資料選項
* f - Filtering input 搜尋框
* t - The Table 表格
* i - Information 表格資訊
* p - Pagination 分頁按鈕
* r - pRocessing 載入等待顯示資訊
* < and > - div elements 一個div元素
* <"#id" and > - div with an id 指定id的div元素
* <"class" and > - div with a class 指定樣式名的div元素
* <"#id.class" and > - div with an id and class 指定id和樣式的div元素
$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">' //表格資訊在表格上方，其他的都在表格底部，top，bottom是新增的類名
} );
} );2.為Datatables繫結資料（‘點選行獲取資料’）
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );3.列渲染（render）
把某一列隱藏，通過columns.render方法把該列的值拼接到另一列
$('#example').dataTable({ //將第四列的值拼接到第一列，並隱藏第四列
"columnDefs": [{
"render": function(data, type, row) {
return data + ' (' + row[3] + ')';
},
"targets": 0
},
{
"visible": false,
"targets": [3]
}]
});4.建立行回撥（createdRow）
當某欄的值滿足某種條件時，觸發某種效果
//當工資大於4000的時候用高亮顯示，注意columns.createdCell選項也可以實現同樣的效果
$(document).ready(function() {
$('#example').dataTable( {
"createdRow": function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
$('td', row).eq(5).css('font-weight',"bold").css("color","red");
}
}
} );
} );5.使用dom選項新增自定義元素
熟練使用dom，可以把給Datatables新增自定義按鈕或者其他工具，使其看起來是一個整體
$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"toolbar">frtip' //toolbar是新增自定義元素的類名，fltip為datatables顯示出來的元件
} );
$("div.toolbar").html('<b style="color:red">自定義文字、圖片等等</b>'); //向新增的自定義元素裡新增內容
} );6.更改頁面顯示條數的下拉框選項（lengthMenu）
此選項能夠指定顯示分頁長度select元素的下拉選項，它可以是一維陣列，也可以是二維陣列，預設值為 [ 10, 25, 50, 100 ]
-
整數值的一維陣列，用於顯示的選項和顯示長度的值
-
二維陣列，第一個陣列用來作為長度的值，第二個陣列用來作為顯示的選項。這是很有用的，比如當你想顯示“所有”選項
$('#example').dataTable({
"lengthMenu": [[2, 4, 6, -1], [2, 4, 6, "All"]]
});一段小程式碼。包含零零散散的小功能，
$(function(){
var table = $('#example').DataTable({
"columnDefs":[{
"render":function(data,type,row){ //列渲染，把第0列拼接到第4列
return data+'('+row[3]+')';
},
"targets":0
},
{
"visible":false, //隱藏第4列
"targets":[3]
}],
"createdRow":function(row,data,index){ //行建立回撥，如果第6列的薪資大於4000，字型變紅
if(data[5].replace(/[\$,]/g,'')*1>4000){
$('td',row).eq(4).css('color','red');
}
},
"dom":'<"toolbar">ltip', //新增自定義元素，toolbar為新增元素的類名，ltip是要顯示出來的datatables的元件
// "lengthMenu":[[2,4,6,-1],[2,4,6,'所有']], //自定義每頁顯示長度
"drawCallback":function(setting){
var api = this.api();
var rows = api.rows({
page:'current'
}).nodes(); //獲取當前頁面的多行節點
var last = null;
api.column(2,{ //新增一個類名為group的元素，內容為第3列的內容，並顯示到當前行的前面
page:'current'
}).data().each(function(group,i){
if(last !== group){
$(rows).eq(i).before('<tr class="group"><td colspan="5">'+group+'</td></tr>');
last = group;
}
})
}
});
$('div.toolbar').html('<p style="color:red">hiahia~</p>'); //給自定義新增的元素新增內容
$('#example').on('click','tr.group',function(){ // 新增的元素新增點選事件
var currentOrder = table.order()[0]; //獲取DataTables的排序和控制。以二維陣列的格式儲存排序資訊
//第1個引數為排序列的索引值，第2個引數為排序的方式
if(currentOrder[0]==2&¤tOrder[1]=='asc'){
table.order([2,'desc']).draw(); //order只設置表的排序，並不執行，draw（）方法執行效果
}else{
table.order([2,'asc']).draw();
}
})
})