1、DataTables的預設配置

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

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

“bPaginate”: true, //翻頁功能
“bLengthChange”: true, //改變每頁顯示資料數量
“bFilter”: true, //過濾功能
“bSort”: false, //排序功能
“bInfo”: true,//頁尾資訊
“bAutoWidth”: true//自動寬度

3、資料排序

$(document).ready(function() {
$(‘#example’).dataTable( {
“aaSorting”: [
[ 
 
4, "desc" ]
]
} );
} );
從第0列開始，以第4列倒序排列

4、多列排序

5、隱藏某些列

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

6、改變頁面上元素的位置

$(document).ready(function
 
() {
$(‘#example’).dataTable( {
“sDom”: ‘<”top”fli>rt<”bottom”p><”clear”>’
} );
} );
//l- 每頁顯示數量
//f – 過濾輸入
//t – 表單Table
//i – 資訊
//p – 翻頁
//r – pRocessing
//< and > – div elements
//<”class” and > – div with a class
//Examples: <”wrapper”flipt>, <lf<t>ip>

7、狀態儲存，使用了翻頁或者改變了每頁顯示資料數量，會儲存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容。

$(document).ready(function() {
$(‘#example’).dataTable( {
“bStateSave”: true
} );
} );

8、顯示數字的翻頁樣式

$(document).ready(function() {
$(‘#example’).dataTable( {
“sPaginationType”: “full_numbers”
} );
} );

9、水平限制寬度

$(document).ready(function() {
$(‘#example’).dataTable( {
“sScrollX”: “100%”,
“sScrollXInner”: “110%”,
“bScrollCollapse”: true
} );
} );

10、垂直限制高度

11、水平和垂直兩個方向共同限制

12、改變語言

$(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’ />”
}
} );
} );

13、click事件

14/配合使用tooltip外掛

15、定義每頁顯示資料數量

$(document).ready(function() {
$(‘#example’).dataTable( {
“aLengthMenu”: [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );

16、row callback

最後一列的值如果為“A”則加粗顯示

17、排序控制

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

18、從配置檔案中讀取語言包

$(document).ready(function() {
$(‘#example’).dataTable( {
“oLanguage”: {
“sUrl”: “cn.txt”
}
} );
} );

19、是用ajax源

$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“sAjaxSource”: ‘./arrays.txt’
} );
} );

20、使用ajax，在伺服器端整理資料

$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“sPaginationType”: “full_numbers”,
“sAjaxSource”: “./server_processing.php”,
/*如果加上下面這段內容，則使用post方式傳遞資料
“fnServerData”: function ( sSource, aoData, fnCallback ) {
$.ajax( {
“dataType”: ‘json’,
“type”: “POST”,
“url”: sSource,
“data”: aoData,
“success”: fnCallback
} );
}*/
“oLanguage”: {
“sUrl”: “cn.txt”
},
“aoColumns”: [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET['sColumns']將接收到aoColumns傳遞資料
} );
} );

21、為每行載入id和class

伺服器端返回資料的格式：
{
“DT_RowId”: “row_8″,
“DT_RowClass”: “gradeA”,
“0″: “Gecko”,
“1″: “Firefox 1.5″,
“2″: “Win 98+ / OSX.2+”,
“3″: “1.8″,
“4″: “A”
},

22、為每行顯示細節，點選行開頭的“+”號展開細節顯示

23、選擇多行

22、整合jQuery外掛jEditable

 更過參考：

要注意的是，要被dataTable處理的table物件，必須有thead與tbody，而且，結構要規整（資料不一定要完整），這樣才能正確處理。

以下是在進行dataTable繫結處理時候可以附加的引數：

DataTable支援如下回調函式