jQuery 的插件 dataTables 是一個優秀的表格插件，提供了針對表格的排序、瀏覽器分頁、服務器分頁、篩選、格式化等功能。dataTables 的網站上也提供了大量的演示和詳細的文檔進行說明，爲了方便學習使用，這裏一步一步進行說明。
首先，需要到 dataTables 的網站 http://www.datatables.net/ 下載這個腳本庫，
目前最新的版本是 1.8.2，下載的壓縮包中使用的 jQuery 是 1.4.4 。現在 jQuery1.5.1 已經發布，所以，這裏使用最新的 jQuery 1.5.1 。
然後，在網頁中先加入 jQuery 的引用，然後，加入 dataTables 的引用。
引入CSS文件和JS文件
--------------------------------------------------------------------------
<style type="text/css" title="currentStyle">
@import "DataTables-1.8.1/media/css/demo_page.css";
@import "DataTables-1.8.1/media/css/demo_table.css";
@import "DataTables-1.8.1/media/css/demo_table_jui.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script>
--------------------------------------------------------------------------
-----------最簡單的方式：
$(document).ready(function() {
$("#example").dataTable();
});
----------也可以自己定義各屬性：
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#example").dataTable({
// "bPaginate": true, //開關，是否顯示分頁器
// "bInfo": true, //開關，是否顯示錶格的一些信息
// "bFilter": true, //開關，是否啓用客戶端過濾器
// "sDom": "<>lfrtip<>",
// "bAutoWith": false,
// "bDeferRender": false,
// "bJQueryUI": false, //開關，是否啓用JQueryUI風格
// "bLengthChange": true, //開關，是否顯示每頁大小的下拉框
// "bProcessing": true,
// "bScrollInfinite": false,
// "sScrollY": "800px", //是否開啓垂直滾動，以及指定滾動區域大小,可設值：'disabled','2000px'
// "bSort": true, //開關，是否啓用各列具有按列排序的功能
// "bSortClasses": true,
// "bStateSave": false, //開關，是否打開客戶端狀態記錄功能。這個數據是記錄在cookies中的，打開了這個記錄後，即使刷新一次頁面，或重新打開瀏覽器，之前的狀態都是保存下來的- ------當值爲true時aoColumnDefs不能隱藏列
// "sScrollX": "50%", //是否開啓水平滾動，以及指定滾動區域大小,可設值：'disabled','2000%'
// "aaSorting": [[0, "asc"]],
// "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隱藏列
// "sDom": '<"H"if>t<"F"if>',
"bAutoWidth": false, //自適應寬度
"aaSorting": [[1, "asc"]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sProcessing": "正在加載中......",
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "對不起，查詢不到相關數據！",
"sEmptyTable": "表中無數據存在！",
"sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
"sInfoFiltered": "數據表中共爲 _MAX_ 條記錄",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "末頁"
}
} //多語言配置
});
});
</script>
----------------頁面：
對於 dataTables 來說，表格必須通過 thead 和 tbody 進行說明，如下所示，
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> |
如果沒有 thead 將會報錯。
![]()
最爲簡單的使用方式，就是零配置的方式。
$(document).ready(function(){ |
$('#example').dataTable(); |
});
以下是在進行dataTable綁定處理時候可以附加的參數：
| 屬性名稱 |
取值範圍 |
解釋 |
| bAutoWidth |
true or false, default true |
是否自動計算表格各列寬度 |
| bDeferRender |
true or false, default false |
用於渲染的一個參數 |
| bFilter |
true or false, default true |
開關，是否啓用客戶端過濾功能 |
| bInfo |
true or false, default true |
開關，是否顯示錶格的一些信息 |
| bJQueryUI |
true or false, default false |
是否使用jquery ui themeroller的風格 |
| bLengthChange |
true or false, default true |
開關，是否顯示一個每頁長度的選擇條（需要分頁器支持） |
| bPaginate |
true or false, default true |
開關，是否顯示（使用）分頁器 |
| bProcessing |
true or false, defualt false |
開關，以指定當正在處理數據的時候，是否顯示“正在處理”這個提示信息 |
| bScrollInfinite |
true or false, default false |
開關，以指定是否無限滾動（與sScrollY配合使用），在大數據量的時候很有用。當這個標誌爲true的時候，分頁器就默認關閉 |
| bSort |
true or false, default true |
開關，是否讓各列具有按列排序功能 |
| bSortClasses |
true or false, default true |
開關，指定當當前列在排序時，是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3'，打開後，在處理大數據時，性能有所損失 |
| bStateSave |
true or false, default false |
開關，是否打開客戶端狀態記錄功能。這個數據是記錄在cookies中的，打開了這個記錄後，即使刷新一次頁面，或重新打開瀏覽器，之前的狀態都是保存下來的 |
| sScrollX |
'disabled' or '100%' 類似的字符串 |
是否開啓水平滾動，以及指定滾動區域大小 |
| sScrollY |
'disabled' or '200px' 類似的字符串 |
是否開啓垂直滾動，以及指定滾動區域大小 |
| -- |
-- |
-- |
| 選項 |
|
|
| aaSorting |
array array[int,string], 如[], [[0,'asc'], [0,'desc']] |
指定按多列數據排序的依據 |
| aaSortingFixed |
同上 |
同上。唯一不同點是不能被用戶的自定義配置衝突 |
| aLengthMenu |
default [10, 25, 50, 100]，可以爲一維數組，也可爲二維數組，比如：[[10, 25, 50, -1], [10, 25, 50, "All"]] |
這個爲選擇每頁的條目數，當使用一個二維數組時，二維層面只能有兩個元素，第一個爲顯示每頁條目數的選項，第二個是關於這些選項的解釋 |
| aoSearchCols |
default null, 類似：[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] |
給每個列單獨定義其初始化搜索列表特性（這一塊還沒搞懂） |
| asStripClasses |
default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3'] |
指定要被應用到各行的class風格，會自動循環 |
| bDestroy |
true or false, default false |
用於當要在同一個元素上執行新的dataTable綁定時，將之前的那個數據對象清除掉，換以新的對象設置 |
| bRetrieve |
true or false, default false |
用於指明當執行dataTable綁定時，是否返回DataTable對象 |
| bScrollCollapse |
true or false, default false |
指定適當的時候縮起滾動視圖 |
| bSortCellsTop |
true or false, default false |
（未知的東東） |
| iCookieDuration |
整數，默認7200，單位爲秒 |
指定用於存儲客戶端信息到cookie中的時間長度，超過這個時間後，自動過期 |
| iDeferLoading |
整數，默認爲null |
延遲加載，它的參數爲要加載條目的數目，通常與bServerSide，sAjaxSource等配合使用 |
| iDisplayLength |
整數，默認爲10 |
用於指定一屏顯示的條數，需開啓分頁器 |
| iDisplayStart |
整數，默認爲0 |
用於指定從哪一條數據開始顯示到表格中去 |
| iScrollLoadGap |
整數，默認爲100 |
用於指定當DataTable設置爲滾動時，最多可以一屏顯示多少條數據 |
| oSearch |
默認{ "sSearch": "", "bRegex": false, "bSmart": true } |
又是初始時指定搜索參數相關的，有點複雜，沒搞懂目前 |
| sAjaxDataProp |
字符串，default 'aaData' |
指定當從服務端獲取表格數據時，數據項使用的名字 |
| sAjaxSource |
URL字符串，default null |
指定要從哪個URL獲取數據 |
| sCookiePrefix |
字符串，default 'SpryMedia_DataTables_' |
當打開狀態存儲特性後，用於指定存儲在cookies中的字符串的前綴名字 |
| sDom |
default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) |
這是用於定義DataTable佈局的一個強大的屬性，另開專門文檔來補充說明吧 |
| sPaginationType |
'full_numbers' or 'two_button', default 'two_button' |
用於指定分頁器風格 |
| sScrollXInner |
string default 'disabled' |
又是水平滾動相關的，沒搞懂啥意思 |
DataTable支持如下回調函數
| 回調函數名稱 |
參數 |
返回值 |
默認 |
功能 |
| fnCookieCallback |
1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set |
string: cookie formatted string (which should be encoded by using encodeURIComponent()) |
null |
當每次cookies改變時，會觸發這個函數調用 |
| fnDrawCallback |
無 |
無 |
無 |
在每次table被draw完後調用，至於做什麼就看着辦吧 |
| fnFooterCallback |
1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array<
4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array |
無 |
無 |
用於在每次重畫的時候修改表格的腳部 |
| fnFormatNumber |
1.int : number to be formatted |
String : formatted string for DataTables to show the number |
有默認的 |
用於在大數字上，自動加入一些逗號，分隔開 |
| fnHeaderCallback |
1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array
4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array |
無 |
無 |
用於在每次draw發生時，修改table的header |
| fnInfoCallback |
1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering)
5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rules |
string: The string to be displayed in the information element. |
無 |
用於傳達table信息 |
| fnInitComplete |
1.object:oSettings - DataTables settings object |
無 |
無 |
表格初始化完成後調用 |
| fnPreDrawCallback |
1.object:oSettings - DataTables settings object |
Boolean |
無 |
用於在開始繪製之前調用，返回false的話，會阻止draw事件發生；返回其它值，draw可以順利執行 |
| fnRowCallback |
1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int
: The index of the data in the full list of rows (after filtering) |
node : "TR" element for the current row |
無 |
當創建了行，但還未繪製到屏幕上的時候調用，通常用於改變行的class風格 |
| fnServerData |
1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on
completion of the data get process that will draw the data on the page. |
void |
$.getJSON |
用於替換默認發到服務端的請求操作 |
| fnStateLoadCallback |
1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties
please refer to the DataTables code. |
Boolean - false if the state should not be loaded, true otherwise |
無 |
在cookies中的數據被加載前執行，可以方便地修改這些數據 |
| fnStateSaveCallback |
1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie. |
String - the full string that should be used to save the state |
無 |
在狀態數據被存儲到cookies前執行，可以方便地做一些預操作 |
表格的效果
![]()
注意，紅框表示了四個默認的設置效果，分別用來選擇每頁的行數，表格的過濾器，表格的信息和換頁。
此時，使用了幾個默認的參數設置。在 dataTables 中，參數名稱的前綴用來說明參數的數據類型，很明顯，b 表示布爾類型，i 表示整數類型，s 表示字符串類型。
- bPaginate: 是否分頁，默認爲 true，分頁
- iDisplayLength : 每頁的行數，每頁默認數量:10
- sPaginationType: 分頁樣式，支持兩種內置方式，two_button 和 full_numbers, 默認使用 two_button。
- bLengthChange : 是否允許用戶通過一個下拉列表來選擇分頁後每頁的行數。行數爲 10，25，50，100。這個設置需要 bPaginate 支持。默認爲 true。
- bFilter: 啓用或禁止數據過濾，默認爲 true。 注意，如果使用過濾功能，但是希望關閉默認的過濾輸入框，應使用 sDom
- bInfo: 允許或者禁止表信息的顯示，默認爲 true，顯示信息。
我們也可以通過傳遞一個初始化參數對象來改變這些設置。例如，下面的例子將每頁的行數設置爲 20 行。
