jquery datatables api （轉）

學習可參考：http://www.guoxk.com/node/jquery-datatables

                      http://yuemeiqing2008-163-com.iteye.com/blog/2006942

1:導入包：

    URL：http://www.datatables.net/

   分别導入css和js檔案

Html代碼  

1. <style type="text/css" title="currentStyle">  
2. @import "css/demo_page.css";  
3. @import "css/demo_table.css";  
4. @import "css/demo_table_jui.css";  
5. </style>  
6. <script type="text/javascript" language="javascript"  
7.     src="js/jquery.js"></script>  
8. <script type="text/javascript" language="javascript"  
9.     src="js/jquery.dataTables.js"></script>  

 加載

Html代碼  

1. <script type="text/javascript">  
2.         $(document).ready(function() {  
3.             $('#example').dataTable();  
4.         });  
5.     </script>  

 表單

Html代碼  

1. <div class="col_2_3_right">  
2.                 <div class="index_viewport">  
3.                     <table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">  
4.                         <thead>  
5.                             <tr>  
6.                                 <th width="20%">First name</th>  
7.                                 <th width="20%">Last name</th>  
8.                                 <th width="35%">City</th>  
9.                                 <th width="25%">Date</th>  
10.                             </tr>  
11.                         </thead>  
12.                     </table>  
13.                 </div>  
14.             </div>  

問題：有時提示找不到datatable方法

原因 window.onload必須等到頁面内包括圖檔的所有元素加載完畢後才能執行。 

$(document).ready()是DOM結構繪制完畢後就執行，不必等到加載完畢。

 從背景ajax得資料重建datatables（表單的id要與json的key一緻）

Js代碼  

1. $.ajax({  
2.                     　　type:'get',//可選get  
3.                     　　url:'${projectPath}/search',  
4.                     　　data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},  
5.                     　　dataType:'text',//伺服器傳回的資料類型 可選XML ,Json jsonp script htmltext等  
6.                     　　success:function(msg){  
7.                         var msgObj=JSON.parse(msg);  
8.                         //重新建構table  
9.                          $('#example').dataTable().fnClearTable();   //将資料清除  
10.                     　    $('#example').dataTable().fnAddData(packagingdatatabledata(msgObj),true);  //資料必須是json對象或json對象數組  
11.                     　  
12.                 　　},  
13.                     　　error:function(){  
14.                     　　alert('error');  
15.                     　　}  
16.             })})  

傳入的資料

Js代碼  

1. //把伺服器傳回的資料轉成datatable須要的格式  
2.         function packagingdatatabledata(msgObj){  
3.             var editHtml="<a class='btn' data-toggle='modal' href='#modalbackdroptrue' >編輯</a>";  
4.             //var editHtml="<a class='btn' href='#modalbackdroptrue' data-toggle='modal' >編輯</a>";  
5.             var a=[];  
6.             var tableName=['day','data','indata','edit'];  
7.             var banddata=storjson(msgObj['data']);  
8.             var bandindata=storjson(msgObj['indata']);  
9.             for(var key in banddata){  
10.                 var tempObj=new Object();  
11.                 tempObj.day=key;  
12.                 tempObj.data=banddata[key];  
13.                 tempObj.indata=bandindata[key];  
14.                 tempObj.edit=editHtml;  
15.                 a.push(JSON.parse(JSON.stringify(tempObj,tableName)));  
16.                 }  
17.             return a;  
18.         }  

 傳入的是一個對象數組，每個對象代表一行，對象的屬性即是列

單擊時得到某行的值

   須要引入 jquery.dataTables.nightly.js  在附件中有  

Js代碼  

1. $(document).ready(function() {  
2.     $('#example').dataTable();  
3. $('#example tbody tr').live('click', function () {  
4.                 var sTitle;  
5.                 var nTds = $('td', this);  
6.                 var sday = $(nTds[0]).text();  //得到第1列的值  
7.                 var sout = $(nTds[1]).text();  
8.                 var sin = $(nTds[2]).text();  
9.             } );  
10. } );  

2：詳細配置

Js代碼  

1. var docrTable = $('#docrevisontable').dataTable({  
2.             "bProcessing" : true, //DataTables載入資料時，是否顯示‘進度’提示  
3.             "bServerSide" : true, //是否啟動伺服器端資料導入  
4.             "bStateSave" : true, //是否打開用戶端狀态記錄功能,此功能在ajax重新整理紀錄的時候不會将個性化設定回複為初始化狀态  
5.             "bJQueryUI" : true, //是否使用 jQury的UI theme  
6.             "sScrollY" : 450, //DataTables的高  
7.             "sScrollX" : 820, //DataTables的寬  
8.             "aLengthMenu" : [20, 40, 60], //更改顯示記錄數選項  
9.             "iDisplayLength" : 40, //預設顯示的記錄數  
10.             "bAutoWidth" : false, //是否自适應寬度  
11.             //"bScrollInfinite" : false, //是否啟動初始化滾動條  
12.             "bScrollCollapse" : true, //是否開啟DataTables的高度自适應，當資料條數不夠分頁資料條數的時候，插件高度是否随資料條數而改變  
13.             "bPaginate" : true, //是否顯示（應用）分頁器  
14.             "bInfo" : true, //是否顯示頁腳資訊，DataTables插件左下角顯示記錄數  
15.             "sPaginationType" : "full_numbers", //詳細分頁組，可以支援直接跳轉到某頁  
16.             "bSort" : true, //是否啟動各個字段的排序功能  
17.             "aaSorting" : [[1, "asc"]], //預設的排序方式，第2列，升序排列  
18.             "bFilter" : true, //是否啟動過濾、搜尋功能  
19.                     "aoColumns" : [{  
20.                         "mDataProp" : "USERID",  
21.                         "sDefaultContent" : "", //此列預設值為""，以防資料中沒有此值，DataTables加載資料的時候報錯  
22.                         "bVisible" : false //此列不顯示  
23.                     }, {  
24.                         "mDataProp" : "USERNAME",  
25.                         "sTitle" : "使用者名",  
26.                         "sDefaultContent" : "",  
27.                         "sClass" : "center"  
28.                     }, {  
29.                         "mDataProp" : "EMAIL",  
30.                         "sTitle" : "電子郵箱",  
31.                         "sDefaultContent" : "",  
32.                         "sClass" : "center"  
33.                     }, {  
34.                         "mDataProp" : "MOBILE",  
35.                         "sTitle" : "手機",  
36.                         "sDefaultContent" : "",  
37.                         "sClass" : "center"  
38.                     }, {  
39.                         "mDataProp" : "PHONE",  
40.                         "sTitle" : "座機",  
41.                         "sDefaultContent" : "",  
42.                         "sClass" : "center"  
43.                     }, {  
44.                         "mDataProp" : "NAME",  
45.                         "sTitle" : "姓名",  
46.                         "sDefaultContent" : "",  
47.                         "sClass" : "center"  
48.                     }, {  
49.                         "mDataProp" : "ISADMIN",  
50.                         "sTitle" : "使用者權限",  
51.                         "sDefaultContent" : "",  
52.                         "sClass" : "center"  
53.                     }],  
54.                     "oLanguage": { //國際化配置  
55.                 "sProcessing" : "正在擷取資料，請稍後...",    
56.                 "sLengthMenu" : "顯示 _MENU_ 條",    
57.                 "sZeroRecords" : "沒有您要搜尋的内容",    
58.                 "sInfo" : "從 _START_ 到  _END_ 條記錄 總記錄數為 _TOTAL_ 條",    
59.                 "sInfoEmpty" : "記錄數為0",    
60.                 "sInfoFiltered" : "(全部記錄數 _MAX_ 條)",    
61.                 "sInfoPostFix" : "",    
62.                 "sSearch" : "搜尋",    
63.                 "sUrl" : "",    
64.                 "oPaginate": {    
65.                     "sFirst" : "第一頁",    
66.                     "sPrevious" : "上一頁",    
67.                     "sNext" : "下一頁",    
68.                     "sLast" : "最後一頁"    
69.                 }  
70.             },  
71.                     "fnRowCallback" : function(nRow, aData, iDisplayIndex) {  
72.                         if (aData.ISADMIN == '1')  
73.                             $('td:eq(5)', nRow).html('管理者');  
74.                         if (aData.ISADMIN == '2')  
75.                             $('td:eq(5)', nRow).html('資料下載下傳');  
76.                         if (aData.ISADMIN == '3')  
77.                             $('td:eq(5)', nRow).html('一般使用者');  
78.                         return nRow;  
79.                     },  
80.                     "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),  
81.                         //伺服器端，資料回調處理  
82.                             "fnServerData" : function(sSource, aDataSet, fnCallback) {  
83.                                 $.ajax({  
84.                                     "dataType" : 'json',  
85.                                     "type" : "POST",  
86.                                     "url" : sSource,  
87.                                     "data" : aDataSet,  
88.                                     "success" : fnCallback  
89.                                 });  
90.                             }  
91.                 });  
92.                 $("#docrevisontable tbody").click(function(event) { //當點選表格内某一條記錄的時候，會将此記錄的cId和cName寫入到隐藏域中  
93.                     $(docrTable.fnSettings().aoData).each(function() {  
94.                         $(this.nTr).removeClass('row_selected');  
95.                     });  
96.                     $(event.target.parentNode).addClass('row_selected');  
97.                     var aData = docrTable.fnGetData(event.target.parentNode);  
98.                     $("#userId").val(aData.USERID);  
99.                     $("#userN").val(aData.USERNAME);  
100.                 });  
101.                 $('#docrevisontable_filter').html('<span>使用者管理清單');  
102.                 $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="建立"/>');  
103.                 $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="修改"/>');  
104.                 $('#docrevisontable_filter').append('   <input type="button" class="addBtn" id="addBut" value="删除"/>');  
105.                 $('#docrevisontable_filter').append('</span>');  
106.         }  

 設定隐藏列

Js代碼  

1. var oTable = $('#example').dataTable();  
2. oTable.fnSetColumnVis( 0, false);//隐藏列  

 得到目前頁面中的資料

var alldata=$('#example').dataTable().fnGetData();//得到頁面中所有對象

// Row data 

$(document).ready(function() { 

oTable = $('#example').dataTable(); 

oTable.$('tr').click( function () { 

var data = oTable.fnGetData( this ); 

// ... do something with the array / object of data for the row 

} ); 

} ); 

// Individual cell data 

$(document).ready(function() { 

oTable = $('#example').dataTable(); 

oTable.$('td').click( function () { 

var sData = oTable.fnGetData( this ); 

alert( 'The cell clicked on had the value of '+sData ); 

} ); 

} );

 重新整理表中的資料(最後一個參數是否重繪表格，false你浏覽到第二頁不會刷跑到第一頁，但資料不會改變)

$('#example').dataTable().fnUpdate( 'a' , 1 , 1 ,false); //coll 

$('#example').dataTable().fnUpdate( ['a','b'] , 1 ); //row

 得到目前浏覽的datatables頁碼

Js代碼  

1. var tableSetings=$('#example').dataTable().fnSettings()  
2. var paging_length=tableSetings._iDisplayLength;//目前每頁顯示多少  
3. var page_start=tableSetings._iDisplayStart;//目前頁開始  
4. var page=Div(page_start,paging_length);  
5. function Div(exp1, exp2) {  //整除  
6.     var n1 = Math.round(exp1); //四舍五入     
7.     var n2 = Math.round(exp2); //四舍五入    
8.     var rslt = n1 / n2; //除    
9.     if (rslt >= 0) {  
10.         rslt = Math.floor(rslt); //傳回小于等于原rslt的最大整數。     
11.     }  
12.     else {  
13.         rslt = Math.ceil(rslt); //傳回大于等于原rslt的最小整數。     
14.     }  
15.     return rslt;  
16. }  

 設定datatables跳轉到某頁

Js代碼  

1. $('#example').dataTable().fnPageChange(page);   

 注意：由于背景資料可能已經被其它人改變（記錄個數與現在前台不一緻），是以資料fnUpdate時須要判斷前後端資料的一緻性，隻刷 新前台有的資料的狀态

dom:

http://datatables.net/release-datatables/examples/api/select_single_row.html 選擇一行 http://datatables.net/release-datatables/examples/api/select_row.html選擇多行 http://datatables.net/release-datatables/examples/api/editable.html 即時編輯行 http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html 多個tab http://datatables.net/release-datatables/examples/api/add_row.html添加一行（靜态） http://datatables.net/release-datatables/examples/api/multi_filter.html多列搜尋 http://datatables.net/release-datatables/examples/api/multi_filter_select.html多列搜尋（擴充） http://datatables.net/release-datatables/examples/api/highlight.html行列 高亮 http://datatables.net/release-datatables/examples/advanced_init/highlight.html 滑鼠移上去亮 http://datatables.net/release-datatables/examples/api/row_details.html行詳細資訊 http://datatables.net/release-datatables/examples/api/counter_column.html添加行數 http://datatables.net/release-datatables/examples/api/show_hide.html隐藏列 http://datatables.net/release-datatables/examples/api/api_in_init.html點中即為搜尋條件 http://datatables.net/release-datatables/examples/advanced_init/events_live.html 給每一個行添加事件顯示行的資訊 http://datatables.net/release-datatables/examples/advanced_init/events_pre_init.html滑鼠事件 移到某一行顯示資訊 http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html 同上 http://datatables.net/release-datatables/examples/advanced_init/dom_multiple_elements.html 用sdom屬性控制插件位置 http://datatables.net/release-datatables/examples/advanced_init/dom_toolbar.htmlsdom應用 http://datatables.net/release-datatables/examples/advanced_init/length_menu.html更改按多少資料顯示 http://datatables.net/release-datatables/examples/advanced_init/complex_header.html表頭組 http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html按組顯示行 http://datatables.net/release-datatables/examples/advanced_init/row_callback.html列回調函數 http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html總計（footer回調） http://datatables.net/release-datatables/examples/advanced_init/sorting_control.html自定義排序 http://datatables.net/release-datatables/examples/advanced_init/language_file.html國際化

一：api

bAutoWidth ：啟用或禁用自動列寬度的計算。

預設值	true
類型	boolean

1. $(document).ready( function () {
2.     $('#example').dataTable( {
3.         "bAutoWidth": false  //關閉後，表格将不會自動計算表格大小，在浏覽器大化小化的時候會擠在一坨
4.     } );
5. } );

複制代碼

bDeferRender ：根據官網的介紹翻譯過來就是，延期渲染，可以有個速度的提升，當datatable 使用Ajax或者JS源表的資料。這個選項設定為true,将導緻datatable推遲建立表元素每個元素,直到他們都建立完成——本參數的目的是節省大量的時間。

預設值：	false
類型：	boolean

1. $(document).ready( function() {
2.     var oTable = $('#example').dataTable( {
3.         "sAjaxSource": "sources/arrays.txt",
4.         "bDeferRender": true   //這個參數我個人沒有使用過，到底是不是這個效果，大家自己去嘗試一下
5.     } );
6. } );

複制代碼

bFilter ：這個很容易明白，啟用或禁用過濾資料。在datatable過濾是“智能”,它允許使用者 最終輸入多個關鍵字(空格分隔)，和每一行資料比對,即使不是在被指定的順序(這允許比對多個列)。注意,如果您希望使用過濾，在datatable中必須設定為true，如果要删除預設過濾輸入框和留住過濾功能,請使用{ @link DataTable.defaults.sDom }。這個最後一句不明白，不知道大家怎麼了解。

預設值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $('#example').dataTable( {
3.         "bFilter": false
4.     } );
5. } );

複制代碼

bJQueryUI ：這個不用多說了，一看就懂，啟用jQuery UI樣式，(需要在頁面添加jQuery的樣式檔案)。

預設值：	false
類型：	boolean

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.        "bJQueryUI": true
4.     } );
5. } );

複制代碼

bLengthChange ：開啟一頁顯示多少條資料的下拉菜單，允許使用者從下拉框(10、25、50和100)，注意需要分頁(bPaginate：true)。

預設值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $('#example').dataTable( {
3.         "bLengthChange": false,

複制代碼

bPaginate ：開啟分頁功能，如果不開啟，将會全部顯示

預設值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $('#example').dataTable( {
3.         "bPaginate": false   
4.     } );
5. } );

複制代碼

bProcessing ：開啟讀取伺服器資料時顯示正在加載中……特别是大資料量的時候，開啟此功能比較好

預設值：	false
類型:	boolean

1. $(document).ready( function () {
2.     $('#example').dataTable( {
3.         "bProcessing": true
4.     } );
5. } );

複制代碼

bScrollInfinite ：是否開啟不限制長度的滾動條（和sScrollY屬性結合使用），不限制長度的滾動條意味着當使用者拖動滾動條的時候DataTable會不斷加載資料當資料集十分大的時候會有些用處，該選項無法和分頁選項同時使用，分頁選項會被自動禁止，注意，額外推薦的滾動條會優先與該選項

預設值：	false
類型：	boolean

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "bScrollInfinite": true,
4.         "bScrollCollapse": true,
5.         "sScrollY": "200px"//長200像素
6.     } );
7. } );

複制代碼

bServerSide ：開啟伺服器模式，使用伺服器端處理配置datatable。注意：sAjaxSource參數也必須被給予為了給datatable源代碼來擷取所需的資料對于每個畫。 這個翻譯有點别扭。開啟此模式後，你對datatables的每個操作 每頁顯示多少條記錄、下一頁、上一頁、排序（表頭）、搜尋，這些都會傳給伺服器相應的值。

預設值：	false
類型：	boolean

1. $(document).ready( function () {
2.       $('#example').dataTable( {
3.           "bServerSide": true,
4.           "sAjaxSource": "xhr.php"
5.        } );
6. } );

複制代碼

bInfo ：啟用或禁用表資訊顯示。這顯示了關于資料的資訊,目前在網頁上,包括資訊過濾資料,如果行為被執行。這個參數在bServerSide配置後需要用到。

預設值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $('#example').dataTable( {
3.        "bInfo": false//如果這個參數不穿到背景去，伺服器分頁會報錯，據說這個參數包含了表的所有資訊
4.     } );
5. } );

複制代碼

bSort ：開啟排序功能，每一列都有排序功能，如果關閉了，排序功能将失效，也可以自定義排序功能。單個列的排序可以禁用“bSortable”選項。

預設值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $('#example').dataTable( {
3.         "bSort": false
4.     } );
5. } );

複制代碼

bSortClasses ：是否在目前被排序的列上額外添加sorting_1,sorting_2,sorting_3三個class，當該列被排序的時候，可以切換其背景顔色，該選項作為一個來回切換的屬性會增加執行時間（當class被移除和添加的時候），當對大資料集進行排序的時候你或許希望關閉該選項

預設值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $('#example').dataTable( {
3.         "bSortClasses": false
4.      } );
5. } );

複制代碼

bStateSave ：是否開啟狀态儲存，當選項開啟的時候會使用一個cookie儲存表格展示的資訊的狀态，例如分頁資訊，展示長度，過濾和排序等。這樣當終端使用者重新加載這個頁面的時候可以使用以前的設定

預設值：	false
類型：	boolean

1. $(document).ready( function () {
2.     $('#example').dataTable( {
3.         "bStateSave": true
4.     } );
5. } );

複制代碼

sScrollX ：是否開啟水準滾動，當一個表格過于寬以至于無法放入一個布局的時候，或者表格有太多列的時候，你可以開啟該選項進而在一個可橫向滾動的視圖裡面展示表格，該屬性可以是css設定，或者一個數字（作為像素量度來使用）

預設值：	blank string - i.e. disabled
類型：	string

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "sScrollX": "100%",
4.         "bScrollCollapse": true
5.      } );
6. } );

複制代碼

sScrollY：是否開啟垂直滾動，垂直滾動會驅使DataTable設定為給定的長度，任何溢出到目前視圖之外的資料可以通過垂直滾動進行察看當在小範圍區域中顯示大量資料的時候，可以在分頁和垂直滾動中選擇一種方式，該屬性可以是css設定，或者一個數字（作為像素量度來使用）

預設值：	blank string - i.e. disabled
類型：	string

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "sScrollY": "200px",
4.         "bPaginate": false
5.      } );
6. } );

複制代碼

bDestroy ：使用傳遞的新的初始化對象中的屬性構造一個新的表格，并替換一個比對指定的選擇器的表格，如果沒有比對到表格，新的表格會被作為一個普通表格被建構

預設值：	false
類型：	boolean

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "sScrollY": "200px",
4.         "bPaginate": false
5.     } );
6.   // Some time later....
7.     $('#example').dataTable( {
8.         "bFilter": false,
9.         "bDestroy": true
10.     } );
11. } );

複制代碼

bRetrieve ：使用指定的選擇器檢索表格，注意，如果表格已經被初始化，該參數會直接傳回已經被建立的對象，并不會顧及你傳遞進來的初始化參數對象的變化，将該參數設定為true說明你确認已經明白這一點，如果你需要的話，bDestroy可以用來重新初始化表格

預設值：	false
類型：	boolean

1. $(document).ready( function() {
2.     initTable();
3.     tableActions();
4. } );
5. function initTable ()
6. {
7.     return $('#example').dataTable( {
8.     "sScrollY": "200px",
9.     "bPaginate": false,
10.     "bRetrieve": true
11.     } );
12. }
13. function tableActions ()
14. {
15.     var oTable = initTable();
16.     // perform API operations with oTable
17. }

複制代碼

bScrollAutoCss ：指明DataTable中滾動的标題元素是否被允許設定内邊距和外邊距等

預設值：	true
類型：	boolean

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "bScrollAutoCss": false,
4.         "sScrollY": "200px"
5.     } );
6. } );

複制代碼

bScrollCollapse ：當垂直滾動被允許的時候，DataTable會強制表格視圖在任何時候都是給定的高度（對布局有利）不過，當把資料集過濾到十分小的時候看起來會很古怪，而且頁腳會留在最下面當結果集的高度比給定的高度小時該參數會使表格高度自适應

預設值：	false
類型：

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "sScrollY": "200",
4.         "bScrollCollapse": true
5.     } );
6. } );

複制代碼

bSortCellsTop ：是否允許DataTable使用頂部（預設為true）的單元格，或者底部（預設為false）的單元格，當使用複合表頭的時候會有些用處

預設值：	false
類型：	boolean

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "bSortCellsTop": true
4.     } );
5. } );

複制代碼

iCookieDuration ：指定用于存儲用戶端資訊到cookie中的時間長度，超過這個時間後，自動過期

預設值：	7200 (2 hours)
類型：	int

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.        "iCookieDuration": 60*60*24; // 一天
4.     } );
5. } )

複制代碼

iDeferLoading ：當選項被開啟的時候，DataTable在非加載第一次的時候不會向伺服器請求資料，而是會使用頁面上的已有資料（不會應用排序等），是以在加載的時候保留一個XmlHttpRequest，iDeferLoading被用來指明需要延遲加載，而且也用來通知DataTable一個滿的表格有多少條資料，資訊元素和分頁會被正確定留

預設值：	null
類型：	int

1. // 57 records available in the table, no filtering applied
2. $(document).ready( function() {
3.     $('#example').dataTable( {
4.         "bServerSide": true,
5.         "sAjaxSource": "scripts/server_processing.php",
6.         "iDeferLoading": 57
7.     } );
8. } );
9. // 57 records after filtering, 100 without filtering (an initial filter applied)
10. $(document).ready( function() {
11.      $('#example').dataTable( {
12.         "bServerSide": true,
13.         "sAjaxSource": "scripts/server_processing.php",
14.         "iDeferLoading": [ 57, 100 ],
15.             "oSearch": {
16.             "sSearch": "my_filter"
17.           }
18.       } );
19. } );

複制代碼

iDisplayLength ：單頁顯示的資料的條數，如果bLengthChange屬性被開啟，終端使用者可以通過一個彈出菜單重寫該數值

預設值：	10
類型：	int

1. $(document).ready( function() {
2.        $('#example').dataTable( {
3.             "iDisplayLength": 50
4.         } );
5. } )

複制代碼

iDisplayStart ：當開啟分頁的時候，定義展示的記錄的起始序号，不是頁數，是以如果你每個分頁有10條記錄而且想從第三頁開始，需要把該參數指定為20

預設值
類型：	int

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "iDisplayStart": 20
4.     } );
5. } )

複制代碼

iScrollLoadGap ：滾動餘界是指DataTable在目前頁面還有多少條資料可供滾動時自動加載新的資料，你可能希望指定一個足夠大的餘界，以便滾動加載資料的操作對使用者來說是平滑的，同時也不會大到加載比需要的多的多的資料

預設值：	100
類型:	int

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "bScrollInfinite": true,
4.         "bScrollCollapse": true,
5.         "sScrollY": "200px",
6.         "iScrollLoadGap": 50
7.     } );
8. } );

複制代碼

iTabIndex :預設情況下DataTable允許通過為需要鍵盤導航的元素添加tabindex屬性來進行導航（排序、分頁、過濾），允許你通過tab鍵切換控制元件，使用Enter鍵去激活他們，預設為0表示按照文檔流來切換，如果需要的話，你可以使用該參數重寫切換順序，使用-1來禁止内建的鍵盤導航

預設值：
類型：	int

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "iTabIndex": 1
4.     } );
5. } );

複制代碼

oSearch ：該參數允許你在初始化的時候使用已經定義的全局過濾狀态，sSearch對象必須被定義，但是所有的其它選項都是可選的，當bRegex為true的時候，搜尋字元串會被當作正規表達式，當為false（預設）的時候，會被直接當作一個字元串，當bSmart為true的時候，DataTable會使用使用靈活過濾政策（比對任何可能的資料），為false的時候不會這樣做

1. $(document).ready( function() {
2.       $('#example').dataTable( {
3.           "oSearch": {"sSearch": "Initial search"}
4.        } );
5. } )

複制代碼

sAjaxDataProp ：當使用Ajax資料源或者伺服器端處理的時候，DataTable會預設搜尋aaData屬性作為資料源，該選項允許變更資料源的名稱，你可以使用JavaScript的點号對象表示法去通路多級網狀資料源

預設值：	aaData
類型：	string

1. // Get data from { "data": [...] }
2. $(document).ready( function() {
3.     var oTable = $('#example').dataTable( {
4.         "sAjaxSource": "sources/data.txt",
5.        "sAjaxDataProp": "data"
6.     } );
7. } );
8. // Get data from { "data": { "inner": [...] } }
9. $(document).ready( function() {
10.     var oTable = $('#example').dataTable( {
11.        "sAjaxSource": "sources/data.txt",
12.       "sAjaxDataProp": "data.inner"
13.    } );
14. } );

複制代碼

sAjaxSource ：該參數用來向DataTable指定加載的外部資料源（如果想使用現有的資料，請使用aData），可以簡單的提供一個可以用來獲得資料url或者JSON對象，該對象必須包含aaData，作為表格的資料源

預設值：	null
類型：	string

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.         "sAjaxSource": "list.action"
4.      } );
5. } )

複制代碼

sCookiePrefix :該參數可以用來重寫DataTable預設指定的用來存儲狀态資訊的cookie的字首

預設值：	SpryMedia_DataTables_
類型：	string

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.       "sCookiePrefix": "my_datatable_"
4.     } );
5. } );

複制代碼

sDom ：這是用于定義DataTable布局的一個強大的屬性，包括分頁，顯示多少條資料和搜尋，格式如下：

1. The following options are allowed:
2.     'l' - 左上角按個下拉框，10個，20個，50個，所有的哪個
3.     'f' - 快速過濾框
4.     't' - 表格本身
5.     'i' - 分頁資訊
6.     'p' -分頁按鈕
7.     'r' - 現在正在加載中……
8. The following constants are allowed:
9.     'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
10.     'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
11. The following syntax is expected:
12.     '<' and '>' - div 元素
13.     '<"class" and '>' - 給div加clasa
14.     '<"#id" and '>' - 給div加上id
15. Examples:
16.     '<"wrapper"flipt>'
17.     '<lf<t>ip>'

複制代碼

預設值：	lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)
類型：	string

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.        "sDom": '<"top"i>rt<"bottom"flp><"clear">'
4.     } );
5. } );

複制代碼

'<"top"i>rt<"bottom"flp><"clear">'

這段代碼翻譯為html就是這樣子的：

1. <div class="top">
2.     i
3. </div>
4. rt
5. <div class="bottom">
6.     flp
7. </div>
8. <div class="clear"></div>

複制代碼

這樣一對比起來，就容易了解多了.Datatables之強大的sDom屬性的應用

sPaginationType ：DataTable内建了兩種互動式分頁政策，兩個按鈕和全頁數，展現給終端使用者不同的控制方式，可以通過API增加政策

預設值：	two_button
類型：	string

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.        "sPaginationType": "full_numbers"
4.     } );
5. } )

複制代碼

sScrollXInner ：當橫向滾動可用的時候，該屬性可以用來強制DataTable的寬度比需要的更長，比如你需要表格彼此相隔适宜，該變量可以用來使表格變大，而且強制滾動，該該屬性可以是css設定，或者一個數字（作為像素量度來使用）

預設值：	blank string - i.e. disabled
類型：	string

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.        "sScrollX": "100%",
4.        "sScrollXInner": "110%"
5.    } );
6. } );

複制代碼

sServerMethod ：設定使用Ajax方式調用的伺服器端的處理方法或者Ajax資料源的HTTP請求方式

預設值：	GET
類型：	string

1. $(document).ready( function() {
2.     $('#example').dataTable( {
3.        "bServerSide": true,
4.        "sAjaxSource": "list.action",
5.        "sServerMethod": "POST"   //以post的方式送出資料
6.     } );
7. } )

複制代碼 二： 列屬性 aoColumnDefs: This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array (please note that aoColumnDefs was introduced in DataTables 1.7). This allows great flexibility when creating tables, as the aoColumnDefs arrays can be of any length, targeting the columns you specifically want. The aTargets property is an array to target one of many columns and each element in it can be:

aoColumnDefs:這個數組允許您針對一個特定列,多個列,或者所有列,使用aTargets屬性的數組中的每個對象(請注意,介紹了aoColumnDefs datatable 1.7)。這提供了很大的靈活性在建立表,因為aoColumnDefs數組可以是任意長度,目标是你特别想要的列。aTargets的屬性是一個數組來目标衆多列和每個元素在它可以:

• a string - class name will be matched on the TH for the column
• 0 or a positive integer - column index counting from the left
• a negative integer - column index counting from the right
• the string "_all" - all columns (i.e. assign a default)

aoColumns: If specified, then the length of this array  must be equal to the number of columns in the original HTML table. Use 'null' where you wish to use only the default values and automatically detected options.

aoColumnDefs參數和aoColumns可以一起使用,盡管aoColumnDefs優先aoColumns的靈活性。 如果兩者都使用,aoColumns定義将最高優先級。同樣,如果相同的列的目标是在aoColumnDefs多次,第一個元素的數組将最高優先級,最後一個最低的。

aDataSort：定義一個列或多個列自定義排序

Default:	null Takes the value of the column index automatically
Type:	array

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },
6.       { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },
7.       { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }
8.     ]
9.   } );
10. } );
11. // Using aoColumns
12. $(document).ready( function() {
13.   $('#example').dataTable( {
14.     "aoColumns": [
15.       { "aDataSort": [ 0, 1 ] },
16.       { "aDataSort": [ 1, 0 ] },
17.       { "aDataSort": [ 2, 3, 4 ] },
18.       null,
19.       null
20.     ]
21.   } );
22. } );

複制代碼 asSorting：控制列的升序或降序到自定義列

Default:	[ 'asc', 'desc' ]
Type:	array

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "asSorting": [ "asc" ], "aTargets": [ 1 ] },
6.       { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },
7.       { "asSorting": [ "desc" ], "aTargets": [ 3 ] }
8.     ]
9.   } );
10. } );
11. // Using aoColumns
12. $(document).ready( function() {
13.   $('#example').dataTable( {
14.     "aoColumns": [
15.       null,
16.       { "asSorting": [ "asc" ] },
17.       { "asSorting": [ "desc", "asc", "asc" ] },
18.       { "asSorting": [ "desc" ] },
19.       null
20.     ]
21.   } );
22. } );

複制代碼 bSearchable：設定列是否能被快速檢索框搜尋到

Default:	true
Type:	boolean

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "bSearchable": false, "aTargets": [ 0 ] }
6.     ] } );
7. } );
8. // Using aoColumns
9. $(document).ready( function() {
10.   $('#example').dataTable( {
11.     "aoColumns": [
12.       { "bSearchable": false },
13.       null,
14.       null,
15.       null,
16.       null
17.     ] } );
18. } );

複制代碼 bSortable： 啟用或禁用列排序。

Default:	true
Type:	boolean

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "bSortable": false, "aTargets": [ 0 ] }
6.     ] } );
7. } );
8. // Using aoColumns
9. $(document).ready( function() {
10.   $('#example').dataTable( {
11.     "aoColumns": [
12.       { "bSortable": false },
13.       null,
14.       null,
15.       null,
16.       null
17.     ] } );
18. } );

複制代碼 bUseRendered ：高版本已經廢棄這個屬性，沒有使用過，直接翻譯吧！當使用fnRender()為一個列,您可能希望使用原始的資料(在呈現之前)進行排序和過濾(預設是用于呈現的資料,使用者可以看到)。這可能是有用的日期等。請注意,該選項已被棄用,将被删除的下一個版本的datatable。請用mRender / mData而不是fnRender。

Default:	true
Type:	boolean

無例子代碼；

bVisible： 啟用或禁用本列顯示。

Default:	true
Type:	boolean

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "bVisible": false, "aTargets": [ 0 ] }
6.     ] } );
7. } );
8. // Using aoColumns
9. $(document).ready( function() {
10.   $('#example').dataTable( {
11.     "aoColumns": [
12.       { "bVisible": false },
13.       null,
14.       null,
15.       null,
16.       null
17.     ] } );
18. } );

複制代碼 fnCreatedCell：開發人員可定義的函數,就會調用一個細胞被建立(Ajax源等)或處理輸入(DOM源)。這可以作為一種恭維,mRender允許您修改DOM元素(例如添加背景顔色)當元素是可用的。

Default:
Type:	function

1. $(document).ready( function() {
2.   $('#example').dataTable( {
3.     "aoColumnDefs": [ {
4.       "aTargets": [3],
5.       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
6.         if ( sData == "1.7" ) {
7.           $(nTd).css('color', 'blue')
8.         }
9.       }
10.     } ]
11.   });
12. } );

複制代碼 fnRender：高版本已經廢棄這個屬性。mRender這個代替

iDataSort：列索引(從0開始!),你想要執行一個在本專欄時被選中進行排序。這可以用于排序在隐藏列例如。這個也沒使用過

Default:	-1 Use automatically calculated column index
Type:	int

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "iDataSort": 1, "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "iDataSort": 1 },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

複制代碼 mData：這個屬性可以用來讀取JSON資料從任何資料源屬性,包括深層嵌套對象/屬性。可以給mData在許多不同的方面影響其行為:

• integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
• string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source.
• null - the sDefaultContent option will be used for the cell (null by default, so you will need to specify the default content you want - typically an empty string). This can be useful on generated columns such as edit / delete action columns.
• function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:
  • {array|object} The data source for the row
  • {string} The type call data requested - this will be 'set' when setting data or 'filter', 'display', 'type', 'sort' or undefined when gathering data. Note that when undefined is given for the type DataTables expects to get the raw data for the object back
  • {*} Data to set when the second parameter is 'set'.
  The return value from the function is not required when 'set' is the type of call, but otherwise the return is what will be used for the data requested.

Default:	null Use automatically calculated column index
Type:	string

1. // Read table data from objects
2. $(document).ready( function() {
3.   var oTable = $('#example').dataTable( {
4.     "sAjaxSource": "sources/deep.txt",
5.     "aoColumns": [
6.       { "mData": "engine" },
7.       { "mData": "browser" },
8.       { "mData": "platform.inner" },
9.       { "mData": "platform.details.0" },
10.       { "mData": "platform.details.1" }
11.     ]
12.   } );
13. } );
14. // Using mData as a function to provide different information for
15. // sorting, filtering and display. In this case, currency (price)
16. $(document).ready( function() {
17.   var oTable = $('#example').dataTable( {
18.     "aoColumnDefs": [ {
19.       "aTargets": [ 0 ],
20.       "mData": function ( source, type, val ) {
21.         if (type === 'set') {
22.           source.price = val;
23.           // Store the computed dislay and filter values for efficiency
24.           source.price_display = val=="" ? "" : "[        DISCUZ_CODE_7        ]quot;+numberFormat(val);
25.           source.price_filter  = val=="" ? "" : "[        DISCUZ_CODE_7        ]quot;+numberFormat(val)+" "+val;
26.           return;
27.         }
28.         else if (type === 'display') {
29.           return source.price_display;
30.         }
31.         else if (type === 'filter') {
32.           return source.price_filter;
33.         }
34.         // 'sort', 'type' and undefined all just use the integer
35.         return source.price;
36.       }
37.     } ]
38.   } );
39. } );

複制代碼 mRender ：This property is the rendering partner to mData and it is suggested that when you want to manipulate data for display (including filtering, sorting etc) but not altering the underlying data for the table, use this property. mData can actually do everything this property can and more, but this parameter is easier to use since there is no 'set' option. Like mData is can be given in a number of different ways to effect its behaviour, with the addition of supporting array syntax for easy outputting of arrays (including arrays of objects):

• integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
• string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source and also array brackets to indicate that the data reader should loop over the data source array. When characters are given between the array brackets, these characters are used to join the data source array together. For example: "accounts[, ].name" would result in a comma separated list with the 'name' value from the 'accounts' array of objects.
• function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:
  • {array|object} The data source for the row (based on mData)
  • {string} The type call data requested - this will be 'filter', 'display', 'type' or 'sort'.
  • {array|object} The full data source for the row (not based on mData)
  The return value from the function is what will be used for the data requested.

Default:	null Use mData
Type:	string

1. // Create a comma separated list from an array of objects
2. $(document).ready( function() {
3.   var oTable = $('#example').dataTable( {
4.     "sAjaxSource": "sources/deep.txt",
5.     "aoColumns": [
6.       { "mData": "engine" },
7.       { "mData": "browser" },
8.       {
9.         "mData": "platform",
10.         "mRender": "[, ].name"
11.       }
12.     ]
13.   } );
14. } );
15. // Use as a function to create a link from the data source
16. $(document).ready( function() {
17.   var oTable = $('#example').dataTable( {
18.     "aoColumnDefs": [ {
19.       "aTargets": [ 0 ],
20.       "mData": "download_link",
21.       "mRender": function ( data, type, full ) {
22.         return '<a href="'+data+'" target="_blank" rel="external nofollow" >Download</a>';
23.       }
24.     } ]
25.   } );
26. } );

複制代碼 sCellType：Change the cell type created for the column - either TD cells or TH cells. This can be useful as TH cells have semantic meaning in the table body, allowing them to act as a header for a row (you may wish to add scope='row' to the TH elements).

Default:	td
Type:	string

1. // Make the first column use TH cells
2. $(document).ready( function() {
3.   var oTable = $('#example').dataTable( {
4.     "aoColumnDefs": [ {
5.       "aTargets": [ 0 ],
6.       "sCellType": "th"
7.     } ]
8.   } );
9. } );

複制代碼 sClass：給列加上自己定義的屬性

Default:	Empty string
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sClass": "my_class", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "sClass": "my_class" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

複制代碼 sContentPadding ：When DataTables calculates the column widths to assign to each column, it finds the longest string in each column and then constructs a temporary table and reads the widths from that. The problem with this is that "mmm" is much wider then "iiii", but the latter is a longer string - thus the calculation can go wrong (doing it properly and putting it into an DOM object and measuring that is horribly(!) slow). Thus as a "work around" we provide this option. It will append its value to the text that is found to be the longest string for the column - i.e. padding. Generally you shouldn't need this, and it is not documented on the general DataTables.net documentation

Default:	Empty string
Type:	string

1. // Using aoColumns
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumns": [
5.       null,
6.       null,
7.       null,
8.       {
9.         "sContentPadding": "mmm"
10.       }
11.     ]
12.   } );
13. } );

複制代碼 sDefaultContent ：Allows a default value to be given for a column's data, and will be used whenever a null data source is encountered (this can be because mData is set to null, or because the data source itself is null).

Default:	null
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       {
6.         "mData": null,
7.         "sDefaultContent": "Edit",
8.         "aTargets": [ -1 ]
9.       }
10.     ]
11.   } );
12. } );
13. // Using aoColumns
14. $(document).ready( function() {
15.   $('#example').dataTable( {
16.     "aoColumns": [
17.       null,
18.       null,
19.       null,
20.       {
21.         "mData": null,
22.         "sDefaultContent": "Edit"
23.       }
24.     ]
25.   } );
26. } );

複制代碼 sName：This parameter is only used in DataTables' server-side processing. It can be exceptionally useful to know what columns are being displayed on the client side, and to map these to database fields. When defined, the names also allow DataTables to reorder information from the server if it comes back in an unexpected order (i.e. if you switch your columns around on the client-side, your server-side code does not also need updating).

Default:	Empty string
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sName": "engine", "aTargets": [ 0 ] },
6.       { "sName": "browser", "aTargets": [ 1 ] },
7.       { "sName": "platform", "aTargets": [ 2 ] },
8.       { "sName": "version", "aTargets": [ 3 ] },
9.       { "sName": "grade", "aTargets": [ 4 ] }
10.     ]
11.   } );
12. } );
13. // Using aoColumns
14. $(document).ready( function() {
15.   $('#example').dataTable( {
16.     "aoColumns": [
17.       { "sName": "engine" },
18.       { "sName": "browser" },
19.       { "sName": "platform" },
20.       { "sName": "version" },
21.       { "sName": "grade" }
22.     ]
23.   } );
24. } );

複制代碼 sSortDataType ：Defines a data source type for the sorting which can be used to read real-time information from the table (updating the internally cached version) prior to sorting. This allows sorting to occur on user editable elements such as form inputs.

Default:	std
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },
6.       { "sType": "numeric", "aTargets": [ 3 ] },
7.       { "sSortDataType": "dom-select", "aTargets": [ 4 ] },
8.       { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }
9.     ]
10.   } );
11. } );
12. // Using aoColumns
13. $(document).ready( function() {
14.   $('#example').dataTable( {
15.     "aoColumns": [
16.       null,
17.       null,
18.       { "sSortDataType": "dom-text" },
19.       { "sSortDataType": "dom-text", "sType": "numeric" },
20.       { "sSortDataType": "dom-select" },
21.       { "sSortDataType": "dom-checkbox" }
22.     ]
23.   } );
24. } );

複制代碼 sTitle ：The title of this column.

Default:	null Derived from the 'TH' value for this column in the original HTML table.
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sTitle": "My column title", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "sTitle": "My column title" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

複制代碼 sType：The type allows you to specify how the data for this column will be sorted. Four types (string, numeric, date and html (which will strip HTML tags before sorting)) are currently available. Note that only date formats understood by Javascript's Date() object will be accepted as type date. For example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric', 'date' or 'html' (by default). Further types can be adding through plug-ins.

Default:	null Auto-detected from raw data
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sType": "html", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "sType": "html" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

複制代碼 sWidth：Defining the width of the column, this parameter may take any CSS value (3em, 20px etc). DataTables applies 'smart' widths to columns which have not been given a specific width through this interface ensuring that the table remains readable.

Default:	null Automatic
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sWidth": "20%", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "sWidth": "20%" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

複制代碼  三：回調

fnCookieCallback：還沒有使用過 $(document).ready( function () {   $('#example').dataTable( {     "fnCookieCallback": function (sName, oData, sExpires, sPath) {       // Customise oData or sName or whatever else here       return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;     }   } ); } ); 複制代碼 fnCreatedRow：顧名思義，建立行得時候的回調函數 $(document).ready( function() {   $('#example').dataTable( {     "fnCreatedRow": function( nRow, aData, iDataIndex ) {       // 為a的話字型加粗       if ( aData[4] == "A" )       {         $('td:eq(4)', nRow).html( '<b>A</b>' );       }     }   } ); } ); 複制代碼 fnDrawCallback：draw畫 ，這個應該是重繪的回調函數 $(document).ready( function() {   $('#example').dataTable( {     "fnDrawCallback": function( oSettings ) {       alert( 'DataTables 重繪了' );     }   } ); } ); 複制代碼 fnFooterCallback：底部的回調函數，這個可以用來做總計之類的功能 $(document).ready( function() {   $('#example').dataTable( {     "fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) {       nFoot.getElementsByTagName('th')[0].innerHTML = "Starting index is "+iStart;     }   } ); } ) 複制代碼 fnFormatNumber：顧名思義，格式化數字的顯示方式 $(document).ready( function() {   $('#example').dataTable( {     "fnFormatNumber": function ( iIn ) {       if ( iIn < 1000 ) {         return iIn;       } else {         var           s=(iIn+""),           a=s.split(""), out="",           iLen=s.length;         for ( var i=0 ; i<iLen ; i++ ) {           if ( i%3 === 0 && i !== 0 ) {             out = "'"+out;           }           out = a[iLen-i-1]+out;         }       }       return out;     };   } ); } ); 複制代碼 fnHeaderCallback：表頭的回調函數 $(document).ready( function() {   $('#example').dataTable( {     "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {       nHead.getElementsByTagName('th')[0].innerHTML = "Displaying "+(iEnd-iStart)+" records";     }   } ); } ) 複制代碼 fnInfoCallback：datatables資訊的回調函數 $('#example').dataTable( {   "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {     return iStart +" to "+ iEnd;   } } ); 複制代碼 fnInitComplete：datatables初始化完畢後會調用這個方法 $(document).ready( function() {   $('#example').dataTable( {     "fnInitComplete": function(oSettings, json) {       alert( 'DataTables has finished its initialisation.' );     }   } ); } ) 複制代碼 fnPreDrawCallback：每一次繪datatables時候調用的方法 $(document).ready( function() {   $('#example').dataTable( {     "fnPreDrawCallback": function( oSettings ) {       if ( $('#test').val() == 1 ) {         return false;       }     }   } ); } ); 複制代碼 fnRowCallback：行的回調函數 $(document).ready( function() {   $('#example').dataTable( {     "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {       // Bold the grade for all 'A' grade browsers       if ( aData[4] == "A" )       {         $('td:eq(4)', nRow).html( '<b>A</b>' );       }     }   } ); } ); 複制代碼 fnServerData：這個是結合伺服器模式的回調函數，用來處理伺服器傳回過來的資料 // POST data to server $(document).ready( function() {   $('#example').dataTable( {     "bProcessing": true,     "bServerSide": true,     "sAjaxSource": "xhr.php",     "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {       oSettings.jqXHR = $.ajax( {         "dataType": 'json',         "type": "POST",         "url": sSource,         "data": aoData,         "success": fnCallback       } );     }   } ); } ); 複制代碼 fnServerParams：向伺服器傳額外的參數 $(document).ready( function() {   $('#example').dataTable( {     "bProcessing": true,     "bServerSide": true,     "sAjaxSource": "scripts/server_processing.php",     "fnServerParams": function ( aoData ) {       aoData.push( { "name": "more_data", "value": "my_value" } );     }   } ); } ); 複制代碼 fnStateLoad：讀取狀态的回調函數 $(document).ready( function() {   $('#example').dataTable( {     "bStateSave": true,     "fnStateLoad": function (oSettings) {       var o;       // Send an Ajax request to the server to get the data. Note that       // this is a synchronous request.       $.ajax( {         "url": "/state_load",         "async": false,         "dataType": "json",         "success": function (json) {           o = json;         }       } );       return o;     }   } ); } ); 複制代碼 fnStateLoadParams：和上面的不知道什麼差別，沒用過 // Remove a saved filter, so filtering is never loaded $(document).ready( function() {   $('#example').dataTable( {     "bStateSave": true,     "fnStateLoadParams": function (oSettings, oData) {       oData.oSearch.sSearch = "";     }   } ); } ); // Disallow state loading by returning false $(document).ready( function() {   $('#example').dataTable( {     "bStateSave": true,     "fnStateLoadParams": function (oSettings, oData) {       return false;     }   } ); } ); 複制代碼 fnStateLoaded：又是這個，加了ed 不知道意思沒用過 // Show an alert with the filtering value that was saved $(document).ready( function() {   $('#example').dataTable( {     "bStateSave": true,     "fnStateLoaded": function (oSettings, oData) {       alert( 'Saved filter was: '+oData.oSearch.sSearch );     }   } ); } ); 複制代碼 fnStateSave：狀态儲存 $(document).ready( function() {   $('#example').dataTable( {     "bStateSave": true,     "fnStateSave": function (oSettings, oData) {       // Send an Ajax request to the server with the state object       $.ajax( {         "url": "/state_save",         "data": oData,         "dataType": "json",         "method": "POST"         "success": function () {}       } );     }   } ); } ); 複制代碼 fnStateSaveParams ：狀态儲存參數，沒用過，不明白 // Remove a saved filter, so filtering is never saved $(document).ready( function() {   $('#example').dataTable( {     "bStateSave": true,     "fnStateSaveParams": function (oSettings, oData) {       oData.oSearch.sSearch = "";     }   } ); } ); 複制代碼