Jquery DataTables學習筆記（一）

簡介：DataTables是一個jQuery的表格外掛程式。這是一個高度靈活的工具，依據的基礎逐步增強，這將增加先進的互動控制，支援任何HTML表格。
主要特點：
• 自動分頁處理
• 即時表格式資料過濾
• 資料排序以及資料類型自動檢測
• 自動處理列寬度
• 可通過CSS定製樣式
• 支援隱藏列
• 易用
• 可擴充性和靈活性
• 國際化
• 動態建立表格
• 免費的 
參數初始化：
bAutoWidth
是否啟用自動適應列寬
預設值：True
範例程式碼：
$(document).ready( function () {
  $('#example').dataTable( {
    "bAutoWidth": false
  } );
} );
 
 bDeferRender
 是否啟用消極式載入：當你使用AJAX資料來源時，可以提升速度。
 預設值：False
範例程式碼：
$(document).ready(function() {
  var oTable = $('#example').dataTable( {
    "sAjaxSource": "sources/arrays.txt",
    "bDeferRender": true
  } );
} );
 
bFilter
是否啟用內建搜尋功能：可以跨列搜尋。
預設值：True
範例程式碼：
 $(document).ready( function () {
  $('#example').dataTable( {
    "bFilter": false
  } );
} );
 
bInfo 
 是否顯示表格相關資訊：例如翻頁資訊等。
預設值：True
範例程式碼：
$(document).ready( function () {
  $('#example').dataTable( {
    "bInfo": false
  } );
} );
 
bJQueryUI
是否啟用  jQuery UI 皮膚外掛程式支援
預設值:False
範例程式碼：
$(document).ready( function() {
  $('#example').dataTable( {
    "bJQueryUI": true
  } );
} ); 
 
 bLengthChange
是否允許使用者，在下拉式清單自訂選擇分頁大小(10, 25, 50 and 100),需要分頁支援
預設值：True
範例程式碼：
 $(document).ready( function () {
  $('#example').dataTable( {
    "bLengthChange": false
  } );
} );
 
bPaginate
是否開啟分頁
預設值：Ture
範例程式碼:
 $(document).ready( function () {
  $('#example').dataTable( {
    "bPaginate": false
  } );
} );

bProcessing
 是否啟用進度顯示，進度條等等，對處理大量資料很有用處。
預設值：false
範例程式碼：
$(document).ready( function () {
  $('#example').dataTable( {
    "bProcessing": true
  } );
} );
 
bScrollInfinite 
是否開啟內建捲軸，並且顯示所有資料
預設值：fasle
 範例程式碼：
 
$(document).ready(function() {
  $('#example').dataTable( {
    "bScrollInfinite": true,
    "bScrollCollapse": true,
    "sScrollY": "200px"
  } );
} );
 
 
 bServerSide
是否啟用伺服器處理資料來源，必須sAjaxSource指明資料來源位置
預設值：False
範例程式碼：
 

$(document).ready( function () {
  $('#example').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "xhr.php"
  } );
} );
 
 
 bSort
是否開啟列排序功能，如果想禁用某一列排序，可以在每列設定使用bSortable參數
 預設值：True
範例程式碼：
$(document).ready( function () {
  $('#example').dataTable( {
    "bSort": false
  } );
} );

 bSortClasses 
不清楚是做什麼用的，如果處理大量資料時，必須關閉（有人知道嗎？）
預設值：False
範例程式碼：
$(document).ready( function () {
  $('#example').dataTable( {
    "bSortClasses": false
  } );
} );

bStateSave 
 是否開啟cookies儲存目前狀態資訊
 預設值：false
 範例程式碼：
$(document).ready( function () {
  $('#example').dataTable( {
    "bStateSave": true
  } );
} );

sScrollX
是否開啟水平捲軸
預設值：空 （字串類型）
 範例程式碼：
$(document).ready(function() {
  $('#example').dataTable( {
    "sScrollX": "100%",
    "bScrollCollapse": true
  } );
} );
 
sScrollY
 是否開啟垂直捲軸，捲軸大小受限於Datatable的高度大小
預設值：空 （字串類型）
範例程式碼：
$(document).ready(function() {
  $('#example').dataTable( {
    "sScrollY": "200px",
    "bPaginate": false
  } );
} );

 

 

摘自 cnkker.com