jQuery表格插件datatables用法總結（上）

1、Datatables簡介
DataTables是一個jQuery的表格插件。這是一個高度靈活的工具，依據的基礎逐步加強，這將增長先進的互動控制，支持任何HTML表格。主要特色：

• 自動分頁處理

• 即時表格數據過濾

• 數據排序以及數據類型自動檢測

• 自動處理列寬度

• 可經過CSS定製樣式

• 支持隱藏列

• 易用

• 可擴展性和靈活性

• 國際化

• 動態建立表格

• 免費的

2、如何使用
在作後臺的時候並無美工和前端工程師來配合你作頁面，爲了顯示數據並有必定的美感，咱們可使用jQuery的DataTables插件來幫助咱們完成任務
一、DataTables的默認配置

?

1 2 3

$(document).ready( function () { $( '#example' ).dataTable(); } );

二、DataTables的一些基礎屬性配置

?

1 2 3 4 5 6

"bPaginate" : true , //翻頁功能 "bLengthChange" : true , //改變每頁顯示數據數量 "bFilter" : true , //過濾功能 "bSort" : false , //排序功能 "bInfo" : true , //頁腳信息 "bAutoWidth" : true //自動寬度

三、數據排序

?

1 2 3 4 5 6 7

$(document).ready( function () { $( '#example' ).dataTable( { "aaSorting" : [ [ 4, "desc" ] ] } ); } );

從第0列開始，以第4列倒序排列
 四、隱藏某些列

?

1 2 3 4 5 6 7

$(document).ready( function () { $( '#example' ).dataTable( { "aoColumnDefs" : [ { "bSearchable" : false , "bVisible" : false , "aTargets" : [ 2 ] }, { "bVisible" : false , "aTargets" : [ 3 ] } ] } ); } );

五、國際化

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$(document).ready( function () { $( '#example' ).dataTable( { "oLanguage" : { "sLengthMenu" : "每頁顯示 _MENU_ 條記錄" , "sZeroRecords" : "抱歉， 沒有找到" , "sInfo" : "從 _START_ 到 _END_ /共 _TOTAL_ 條數據" , "sInfoEmpty" : "沒有數據" , "sInfoFiltered" : "(從 _MAX_ 條數據中檢索)" , "oPaginate" : { "sFirst" : "首頁" , "sPrevious" : "前一頁" , "sNext" : "後一頁" , "sLast" : "尾頁" }, "sZeroRecords" : "沒有檢索到數據" , "sProcessing" : "<img src='./loading.gif' />" } } ); } );

六、排序功能：

?

1 2 3 4 5 6 7 8 9 10 11

$(document).ready( function () { $( '#example' ).dataTable( { "aoColumns" : [ null , { "asSorting" : [ "asc" ] }, { "asSorting" : [ "desc" , "asc" , "asc" ] }, { "asSorting" : [ ] }, { "asSorting" : [ ] } ] } ); } );

七、數據獲取支持4種：以下

• DOM   文檔數據  
  

• Javascript array  js數組  
  

• Ajax source     Ajax請求數據  
  

• Server side processing  服務器端數據