了解DataTables

官方網(wǎng)站：http://www.datatables.net/

簡介：DataTables是一個jQuery的表格插件。這是一個高度靈活的工具，依據(jù)的基礎(chǔ)逐步增強，這將增加先進的互動控制，支持任何HTML表格。

主要特點：

• 自動分頁處理

• 即時表格數(shù)據(jù)過濾

• 數(shù)據(jù)排序以及數(shù)據(jù)類型自動檢測

• 自動處理列寬度

• 可通過CSS定制樣式

• 支持隱藏列

• 易用

• 可擴展性和靈活性

• 國際化

• 動態(tài)創(chuàng)建表格

• 免費的 

參數(shù)初始化：

bAutoWidth 

是否啟用自動適應(yīng)列寬

默認(rèn)值：True

示例代碼： 

$(document).ready(function(){
  $('#example').dataTable({
    "bAutoWidth": false
  });
});

 bDeferRender 

 是否啟用延遲加載：當(dāng)你使用AJAX數(shù)據(jù)源時，可以提升速度。

 默認(rèn)值：False

示例代碼：

$(document).ready(function(){
  var oTable = $('#example').dataTable({
    "sAjaxSource":"sources/arrays.txt",
    "bDeferRender":true
  });
});

bFilter 

是否啟用內(nèi)置搜索功能：可以跨列搜索。

默認(rèn)值：True 

示例代碼：

 $(document).ready(function(){
  $('#example').dataTable({
    "bFilter":false
  });
});

bInfo  

 是否顯示表格相關(guān)信息：例如翻頁信息等。

默認(rèn)值：True 

示例代碼： 

$(document).ready(function(){
  $('#example').dataTable({
    "bInfo":false
  });
});

bJQueryUI

是否啟用  jQuery UI 皮膚插件支持

默認(rèn)值:False

示例代碼： 

$(document).ready(function(){
  $('#example').dataTable({
    "bJQueryUI":true
  });
});

 bLengthChange

是否允許用戶，在下拉列表自定義選擇分頁大小(10, 25, 50 and 100),需要分頁支持

默認(rèn)值：True

示例代碼： 

 $(document).ready(function(){
  $('#example').dataTable({
    "bLengthChange": false
  });
});

bPaginate 

是否開啟分頁

默認(rèn)值：Ture

示例代碼:

 $(document).ready(function (){ 
  $('#example').dataTable({
    "bPaginate":false
  });
});

bProcessing 

 是否啟用進度顯示，進度條等等，對處理大量數(shù)據(jù)很有用處。

默認(rèn)值：false

示例代碼： 

$(document).ready(function(){
  $('#example').dataTable({
    "bProcessing":true
  });
});

bScrollInfinite  

是否開啟內(nèi)置滾動條，并且顯示所有數(shù)據(jù)

默認(rèn)值：fasle 

 示例代碼： 

$(document).ready(function(){
  $('#example').dataTable({
    "bScrollInfinite":true,
    "bScrollCollapse":true,
    "sScrollY": "200px"
  });
});

 bServerSide

是否啟用服務(wù)器處理數(shù)據(jù)源，必須sAjaxSource指明數(shù)據(jù)源位置

默認(rèn)值：False

示例代碼：

$(document).ready(function(){
  $('#example').dataTable({
    "bServerSide":true,
    "sAjaxSource":"xhr.php"
  });
});

 bSort 

是否開啟列排序功能，如果想禁用某一列排序，可以在每列設(shè)置使用bSortable參數(shù)

 默認(rèn)值：True

示例代碼： 

$(document).ready(function(){
  $('#example').dataTable({
    "bSort":false
  });
});

bSortClasses  

 開關(guān)，指定當(dāng)當(dāng)前列在排序時，是否增加classes ‘sorting_1′, ‘sorting_2′ and ‘sorting_3’，打開后，在處理大數(shù)據(jù)時，性能有所損失

 默認(rèn)值：False

示例代碼：

$(document).ready(function(){
  $('#example').dataTable({
    "bSortClasses":false
  });
});

bStateSave  

 是否開啟cookies保存當(dāng)前狀態(tài)信息

 默認(rèn)值：false

 示例代碼：

$(document).ready(function(){
  $('#example').dataTable({
    "bStateSave": true
  });
});

sScrollX 

是否開啟水平滾動條

默認(rèn)值：空 （字符串類型）

 示例代碼：

$(document).ready(function(){
  $('#example').dataTable({
    "sScrollX":"100%",
    "bScrollCollapse": true
  });
});

sScrollY

 是否開啟垂直滾動條，滾動條大小受限于Datatable的高度大小

默認(rèn)值：空（字符串類型）

示例代碼：

$(document).ready(function(){
  $('#example').dataTable({
    "sScrollY":"200px",
    "bPaginate":false
  });
});

具體的參數(shù)意思可以參考官方文檔。這里提一下fnServerParams。這個參數(shù)可以幫我們傳遞頁面的其他參數(shù)，這個例子中，我傳遞了關(guān)鍵字、起止日期信息，主要用于服務(wù)端的數(shù)據(jù)查找過濾。

用chrome看一下控件會向服務(wù)端傳遞什么：

這是底部的分頁欄

當(dāng)我點第二頁時，傳遞參數(shù)如下：

注意到iDisplayLength是10，因為我默認(rèn)是每頁展示10條數(shù)據(jù)，這個值可以調(diào)整。當(dāng)我點第二頁時，iDisplayStart從0變到10。其實分頁就是這么回事，前端告訴服務(wù)端，我需要那段數(shù)據(jù)，你給我找出來返回給我。

服務(wù)端的返回格式如下（PHP）：

$ret = array(
                "sEcho" => intval($_GET['sEcho']),
                "iTotalRecords" => $data_count,
                "iTotalDisplayRecords" => $data_count,
                "aaData" => array()
            );