jQuery - （JQuery datatables api 使用解讀）

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

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

?? 分別導入css和js文件

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Content/datatables/js/jquery.dataTables.js"></script>
<script src="~/Content/datatables/js/dataTables.bootstrap.js"></script>

?加載

Html代碼??

<script?type="text/javascript">??
????????$(document).ready(function()?{??
????????????$('#example').dataTable();??
????????});??
????</script>??

?表單

Html代碼??

<div?class="col_2_3_right">??
????????????????<div?class="index_viewport">??
????????????????????<table?id="example"?cellpadding="0"?cellspacing="0"?border="0"?width="100%">??
????????????????????????<thead>??
????????????????????????????<tr>??
????????????????????????????????<th?width="20%">First?name</th>??
????????????????????????????????<th?width="20%">Last?name</th>??
????????????????????????????????<th?width="35%">City</th>??
????????????????????????????????<th?width="25%">Date</th>??
????????????????????????????</tr>??
????????????????????????</thead>??
????????????????????</table>??
????????????????</div>??
????????????</div>??

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

原因

window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。?
$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢。

?從后臺ajax得數據重建datatables（表單的id要與json的key一致）

Js代碼??

$.ajax({??
????????????????????　　type:'get',//可選get??
????????????????????　　url:'${projectPath}/search',??
????????????????????　　data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},??
????????????????????　　dataType:'text',//服務器返回的數據類型?可選XML?,Json?jsonp?script?htmltext等??
????????????????????　　success:function(msg){??
????????????????????????var?msgObj=JSON.parse(msg);??
????????????????????????//重新構建table??
?????????????????????????$('#example').dataTable().fnClearTable();???//將數據清除??
????????????????????　????$('#example').dataTable().fnAddData(packagingdatatabledata(msgObj),true);??//數據必須是json對象或json對象數組??
????????????????????　??
????????????????　　},??
????????????????????　　error:function(){??
????????????????????　　alert('error');??
????????????????????　　}??
????????????})})??

傳入的數據

Js代碼??

//把服務器返回的數據轉成datatable須要的格式??
????????function?packagingdatatabledata(msgObj){??
????????????var?editHtml="<a?class='btn'?data-toggle='modal'?href='#modalbackdroptrue'?>編輯</a>";??
????????????//var?editHtml="<a?class='btn'?href='#modalbackdroptrue'?data-toggle='modal'?>編輯</a>";??
????????????var?a=[];??
????????????var?tableName=['day','data','indata','edit'];??
????????????var?banddata=storjson(msgObj['data']);??
????????????var?bandindata=storjson(msgObj['indata']);??
????????????for(var?key?in?banddata){??
????????????????var?tempObj=new?Object();??
????????????????tempObj.day=key;??
????????????????tempObj.data=banddata[key];??
????????????????tempObj.indata=bandindata[key];??
????????????????tempObj.edit=editHtml;??
????????????????a.push(JSON.parse(JSON.stringify(tempObj,tableName)));??
????????????????}??
????????????return?a;??
????????}??

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

單擊時得到某行的值

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

Js代碼??

$(document).ready(function()?{??
????/*?Init?DataTables?*/??
????$('#example').dataTable();??
$('#example?tbody?tr').live('click',?function?()?{??
????????????????var?sTitle;??
????????????????var?nTds?=?$('td',?this);??
????????????????var?sday?=?$(nTds[0]).text();??//得到第1列的值??
????????????????var?sout?=?$(nTds[1]).text();??
????????????????var?sin?=?$(nTds[2]).text();??
??????????????????
????????????}?);??
??
}?);??

???

2：詳細配置

Js代碼??

var?docrTable?=?$('#docrevisontable').dataTable({??
????????????"bProcessing"?:?true,?//DataTables載入數據時，是否顯示‘進度’提示??
????????????"bServerSide"?:?true,?//是否啟動服務器端數據導入??
????????????"bStateSave"?:?true,?//是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設定回復為初始化狀態??
????????????"bJQueryUI"?:?true,?//是否使用?jQury的UI?theme??
????????????"sScrollY"?:?450,?//DataTables的高??
????????????"sScrollX"?:?820,?//DataTables的寬??
????????????"aLengthMenu"?:?[20,?40,?60],?//更改顯示記錄數選項??
????????????"iDisplayLength"?:?40,?//默認顯示的記錄數??
????????????"bAutoWidth"?:?false,?//是否自適應寬度??
????????????//"bScrollInfinite"?:?false,?//是否啟動初始化滾動條??
????????????"bScrollCollapse"?:?true,?//是否開啟DataTables的高度自適應，當數據條數不夠分頁數據條數的時候，插件高度是否隨數據條數而改變??
????????????"bPaginate"?:?true,?//是否顯示（應用）分頁器??
????????????"bInfo"?:?true,?//是否顯示頁腳信息，DataTables插件左下角顯示記錄數??
????????????"sPaginationType"?:?"full_numbers",?//詳細分頁組，可以支持直接跳轉到某頁??
????????????"bSort"?:?true,?//是否啟動各個字段的排序功能??
????????????"aaSorting"?:?[[1,?"asc"]],?//默認的排序方式，第2列，升序排列??
????????????"bFilter"?:?true,?//是否啟動過濾、搜索功能??
????????????????????"aoColumns"?:?[{??
????????????????????????"mDataProp"?:?"USERID",??
????????????????????????"sDefaultContent"?:?"",?//此列默認值為""，以防數據中沒有此值，DataTables加載數據的時候報錯??
????????????????????????"bVisible"?:?false?//此列不顯示??
????????????????????},?{??
????????????????????????"mDataProp"?:?"USERNAME",??
????????????????????????"sTitle"?:?"用戶名",??
????????????????????????"sDefaultContent"?:?"",??
????????????????????????"sClass"?:?"center"??
????????????????????},?{??
????????????????????????"mDataProp"?:?"EMAIL",??
????????????????????????"sTitle"?:?"電子郵箱",??
????????????????????????"sDefaultContent"?:?"",??
????????????????????????"sClass"?:?"center"??
????????????????????},?{??
????????????????????????"mDataProp"?:?"MOBILE",??
????????????????????????"sTitle"?:?"手機",??
????????????????????????"sDefaultContent"?:?"",??
????????????????????????"sClass"?:?"center"??
????????????????????},?{??
????????????????????????"mDataProp"?:?"PHONE",??
????????????????????????"sTitle"?:?"座機",??
????????????????????????"sDefaultContent"?:?"",??
????????????????????????"sClass"?:?"center"??
????????????????????},?{??
????????????????????????"mDataProp"?:?"NAME",??
????????????????????????"sTitle"?:?"姓名",??
????????????????????????"sDefaultContent"?:?"",??
????????????????????????"sClass"?:?"center"??
????????????????????},?{??
????????????????????????"mDataProp"?:?"ISADMIN",??
????????????????????????"sTitle"?:?"用戶權限",??
????????????????????????"sDefaultContent"?:?"",??
????????????????????????"sClass"?:?"center"??
????????????????????}],??
????????????????????"oLanguage":?{?//國際化配置??
????????????????"sProcessing"?:?"正在獲取數據，請稍后...",????
????????????????"sLengthMenu"?:?"顯示?_MENU_?條",????
????????????????"sZeroRecords"?:?"沒有您要搜索的內容",????
????????????????"sInfo"?:?"從?_START_?到??_END_?條記錄?總記錄數為?_TOTAL_?條",????
????????????????"sInfoEmpty"?:?"記錄數為0",????
????????????????"sInfoFiltered"?:?"(全部記錄數?_MAX_?條)",????
????????????????"sInfoPostFix"?:?"",????
????????????????"sSearch"?:?"搜索",????
????????????????"sUrl"?:?"",????
????????????????"oPaginate":?{????
????????????????????"sFirst"?:?"第一頁",????
????????????????????"sPrevious"?:?"上一頁",????
????????????????????"sNext"?:?"下一頁",????
????????????????????"sLast"?:?"最后一頁"????
????????????????}??
????????????},??
??????????????????????
????????????????????"fnRowCallback"?:?function(nRow,?aData,?iDisplayIndex)?{??
????????????????????????/*?用來改寫用戶權限的?*/??
????????????????????????if?(aData.ISADMIN?==?'1')??
????????????????????????????$('td:eq(5)',?nRow).html('管理員');??
????????????????????????if?(aData.ISADMIN?==?'2')??
????????????????????????????$('td:eq(5)',?nRow).html('資料下載');??
????????????????????????if?(aData.ISADMIN?==?'3')??
????????????????????????????$('td:eq(5)',?nRow).html('一般用戶');??
??????????????????????????
????????????????????????return?nRow;??
????????????????????},??
??????????????????????
????????????????????"sAjaxSource"?:?"../use/userList.do?now="?+?new?Date().getTime(),??
????????????????????????//服務器端，數據回調處理??
????????????????????????????"fnServerData"?:?function(sSource,?aDataSet,?fnCallback)?{??
????????????????????????????????$.ajax({??
????????????????????????????????????"dataType"?:?'json',??
????????????????????????????????????"type"?:?"POST",??
????????????????????????????????????"url"?:?sSource,??
????????????????????????????????????"data"?:?aDataSet,??
????????????????????????????????????"success"?:?fnCallback??
????????????????????????????????});??
????????????????????????????}??
????????????????});??
??????????????????
????????????????$("#docrevisontable?tbody").click(function(event)?{?//當點擊表格內某一條記錄的時候，會將此記錄的cId和cName寫入到隱藏域中??
????????????????????$(docrTable.fnSettings().aoData).each(function()?{??
????????????????????????$(this.nTr).removeClass('row_selected');??
????????????????????});??
????????????????????$(event.target.parentNode).addClass('row_selected');??
????????????????????var?aData?=?docrTable.fnGetData(event.target.parentNode);??
??????????????????????
????????????????????$("#userId").val(aData.USERID);??
????????????????????$("#userN").val(aData.USERNAME);??
????????????????});??
??????????????????
????????????????$('#docrevisontable_filter').html('<span>用戶管理列表');??
????????????????$('#docrevisontable_filter').append('???<input?type="button"?class="addBtn"?id="addBut"?value="創建"/>');??
????????????????$('#docrevisontable_filter').append('???<input?type="button"?class="addBtn"?id="addBut"?value="修改"/>');??
????????????????$('#docrevisontable_filter').append('???<input?type="button"?class="addBtn"?id="addBut"?value="刪除"/>');??
????????????????$('#docrevisontable_filter').append('</span>');??
????????}??

?設置隱藏列

Js代碼??

var?oTable?=?$('#example').dataTable();??
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代碼??

var?tableSetings=$('#example').dataTable().fnSettings()??
var?paging_length=tableSetings._iDisplayLength;//當前每頁顯示多少??
var?page_start=tableSetings._iDisplayStart;//當前頁開始??
var?page=Div(page_start,paging_length);??
??
function?Div(exp1,?exp2)?{??//整除??
????var?n1?=?Math.round(exp1);?//四舍五入?????
????var?n2?=?Math.round(exp2);?//四舍五入????
??
????var?rslt?=?n1?/?n2;?//除????
????if?(rslt?>=?0)?{??
????????rslt?=?Math.floor(rslt);?//返回小于等于原rslt的最大整數。?????
????}??
????else?{??
????????rslt?=?Math.ceil(rslt);?//返回大于等于原rslt的最小整數。?????
????}??
????return?rslt;??
}??

?設置datatables跳轉到某頁

Js代碼??

$('#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

$(document).ready( function () {
? ? $('#example').dataTable( {
? ?? ???"bAutoWidth": false??//關閉后，表格將不會自動計算表格大小，在瀏覽器大化小化的時候會擠在一坨
? ? } );
} );

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

默認值：	false
類型：	boolean

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

bFilter?：這個很容易明白，啟用或禁用過濾數據。在datatable過濾是“智能”,它允許用戶最終輸入多個關鍵字(空格分隔)，和每一行數據匹配,即使不是在被指定的順序(這允許匹配多個列)。注意,如果您希望使用過濾，在datatable中必須設置為true，如果要刪除默認過濾輸入框和留住過濾功能,請使用{ @link DataTable.defaults.sDom }。這個最后一句不明白，不知道大家怎么理解。

默認值：	true
類型：	boolean

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

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

默認值：	false
類型：	boolean

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

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

默認值：	true
類型：	boolean

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

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

默認值：	true
類型：	boolean

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

bProcessing?：開啟讀取服務器數據時顯示正在加載中……特別是大數據量的時候，開啟此功能比較好

默認值：	false
類型:	boolean

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

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

默認值：	false
類型：	boolean

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

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

默認值：	false
類型：	boolean

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

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

默認值：	true
類型：	boolean

$(document).ready( function () {
? ? $('#example').dataTable( {
? ?? ? "bInfo": false//如果這個參數不穿到后臺去，服務器分頁會報錯，據說這個參數包含了表的所有信息
? ? } );
} );

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

默認值：	true
類型：	boolean

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

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

默認值：	true
類型：	boolean

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

復

bStateSave?：是否開啟狀態保存，當選項開啟的時候會使用一個cookie保存表格展示的信息的狀態，例如分頁信息，展示長度，過濾和排序等。這樣當終端用戶重新加載這個頁面的時候可以使用以前的設置

默認值：	false
類型：	boolean

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

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

默認值：	blank string - i.e. disabled
類型：	string

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

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

默認值：	blank string - i.e. disabled
類型：	string

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

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

默認值：	false
類型：	boolean

$(document).ready( function() {
? ? $('#example').dataTable( {
? ?? ???"sScrollY": "200px",
? ?? ???"bPaginate": false
? ? } );
? ?
??// Some time later....
? ? $('#example').dataTable( {
? ?? ???"bFilter": false,
? ?? ???"bDestroy": true
? ? } );
} );

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

默認值：	false
類型：	boolean

$(document).ready( function() {
? ? initTable();
? ? tableActions();
} );
function initTable ()
{
? ? return $('#example').dataTable( {
? ? "sScrollY": "200px",
? ? "bPaginate": false,
? ? "bRetrieve": true
? ? } );
}
function tableActions ()
{
? ? var oTable = initTable();
? ? // perform API operations with oTable
}

bScrollAutoCss?：指明DataTable中滾動的標題元素是否被允許設置內邊距和外邊距等

默認值：	true
類型：	boolean

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

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

默認值：	false
類型：

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

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

默認值：	false
類型：	boolean

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

iCookieDuration?：指定用于存儲客戶端信息到cookie中的時間長度，超過這個時間后，自動過期

默認值：	7200?(2 hours)
類型：	int

$(document).ready( function() {
? ? $('#example').dataTable( {
? ?? ? "iCookieDuration": 60*60*24; // 一天
? ? } );
} )

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

默認值：	null
類型：	int

// 57 records available in the table, no filtering applied
$(document).ready( function() {
? ? $('#example').dataTable( {
? ?? ???"bServerSide": true,
? ?? ???"sAjaxSource": "scripts/server_processing.php",
? ?? ???"iDeferLoading": 57
? ? } );
} );
// 57 records after filtering, 100 without filtering (an initial filter applied)
$(document).ready( function() {
? ???$('#example').dataTable( {
? ?? ???"bServerSide": true,
? ?? ???"sAjaxSource": "scripts/server_processing.php",
? ?? ???"iDeferLoading": [ 57, 100 ],
? ?? ?? ?? ?"oSearch": {
? ?? ?? ?? ?"sSearch": "my_filter"
? ?? ?? ? }
? ?? ?} );
} );

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

默認值：	10
類型：	int

$(document).ready( function() {
? ?? ? $('#example').dataTable( {
? ?? ?? ?? ?"iDisplayLength": 50
? ?? ???} );
} )

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

默認值	0
類型：	int

$(document).ready( function() {
? ? $('#example').dataTable( {
? ?? ???"iDisplayStart": 20
? ? } );
} )

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

默認值：	100
類型:	int

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

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

默認值：	0
類型：	int

$(document).ready( function() {
? ? $('#example').dataTable( {
? ?? ???"iTabIndex": 1
? ? } );
} );

oSearch?：該參數允許你在初始化的時候使用已經定義的全局過濾狀態，sSearch對象必須被定義，但是所有的其它選項都是可選的，當bRegex為true的時候，搜索字符串會被當作正則表達式，當為false（默認）的時候，會被直接當作一個字符串，當bSmart為true的時候，DataTable會使用使用靈活過濾策略（匹配任何可能的數據），為false的時候不會這樣做

$(document).ready( function() {
? ?? ?$('#example').dataTable( {
? ?? ?? ? "oSearch": {"sSearch": "Initial search"}
? ?? ? } );
} )

sAjaxDataProp?：當使用Ajax數據源或者服務器端處理的時候，DataTable會默認搜索aaData屬性作為數據源，該選項允許變更數據源的名稱，你可以使用JavaScript的點號對象表示法去訪問多級網狀數據源

默認值：	aaData
類型：	string

// Get data from { "data": [...] }
$(document).ready( function() {
? ? var oTable = $('#example').dataTable( {
? ?? ???"sAjaxSource": "sources/data.txt",
? ?? ? "sAjaxDataProp": "data"
? ? } );
} );
// Get data from { "data": { "inner": [...] } }
$(document).ready( function() {
? ? var oTable = $('#example').dataTable( {
? ?? ? "sAjaxSource": "sources/data.txt",
? ?? ?"sAjaxDataProp": "data.inner"
? ?} );
} );

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

默認值：	null
類型：	string

$(document).ready( function() {
? ? $('#example').dataTable( {
? ?? ???"sAjaxSource": "list.action"
? ???} );
} )

sCookiePrefix?:該參數可以用來重寫DataTable默認指定的用來存儲狀態信息的cookie的前綴

默認值：	SpryMedia_DataTables_
類型：	string

$(document).ready( function() {
? ? $('#example').dataTable( {
? ?? ?"sCookiePrefix": "my_datatable_"
? ? } );
} );

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

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

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

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

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

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

<div class="top">
? ? i
</div>
rt
<div class="bottom">
? ? flp
</div>
<div class="clear"></div>

這樣一對比起來，就容易理解多了.Datatables之強大的sDom屬性的應用
sPaginationType?：DataTable內建了兩種交互式分頁策略，兩個按鈕和全頁數，展現給終端用戶不同的控制方式，可以通過API增加策略

默認值：	two_button
類型：	string

$(document).ready( function() {
? ? $('#example').dataTable( {
? ?? ? "sPaginationType": "full_numbers"
? ? } );
} )

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

默認值：	blank string - i.e. disabled
類型：	string

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

sServerMethod?：設置使用Ajax方式調用的服務器端的處理方法或者Ajax數據源的HTTP請求方式

默認值：	GET
類型：	string

$(document).ready( function() {
? ? $('#example').dataTable( {
? ?? ? "bServerSide": true,
? ?? ? "sAjaxSource": "list.action",
? ?? ? "sServerMethod": "POST"? ?//以post的方式提交數據
? ? } );
} )

二：?列屬性

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

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },
? ?? ?{ "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },
? ?? ?{ "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "aDataSort": [ 0, 1 ] },
? ?? ?{ "aDataSort": [ 1, 0 ] },
? ?? ?{ "aDataSort": [ 2, 3, 4 ] },
? ?? ?null,
? ?? ?null
? ? ]
??} );
} );

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

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

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "asSorting": [ "asc" ], "aTargets": [ 1 ] },
? ?? ?{ "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },
? ?? ?{ "asSorting": [ "desc" ], "aTargets": [ 3 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?null,
? ?? ?{ "asSorting": [ "asc" ] },
? ?? ?{ "asSorting": [ "desc", "asc", "asc" ] },
? ?? ?{ "asSorting": [ "desc" ] },
? ?? ?null
? ? ]
??} );
} );

bSearchable：設置列是否能被快速檢索框搜索到

Default:	true
Type:	boolean

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "bSearchable": false, "aTargets": [ 0 ] }
? ? ] } );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "bSearchable": false },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ] } );
} );

bSortable：啟用或禁用列排序。

Default:	true
Type:	boolean

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "bSortable": false, "aTargets": [ 0 ] }
? ? ] } );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "bSortable": false },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ] } );
} );

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

Default:	true
Type:	boolean

無例子代碼；
bVisible：啟用或禁用本列顯示。

Default:	true
Type:	boolean

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "bVisible": false, "aTargets": [ 0 ] }
? ? ] } );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "bVisible": false },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ] } );
} );

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

Default:	?
Type:	function

$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [ {
? ?? ?"aTargets": [3],
? ?? ?"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
? ?? ???if ( sData == "1.7" ) {
? ?? ?? ? $(nTd).css('color', 'blue')
? ?? ???}
? ?? ?}
? ? } ]
??});
} );

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

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

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

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "iDataSort": 1, "aTargets": [ 0 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "iDataSort": 1 },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ]
??} );
} );

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

// Read table data from objects
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "sAjaxSource": "sources/deep.txt",
? ? "aoColumns": [
? ?? ?{ "mData": "engine" },
? ?? ?{ "mData": "browser" },
? ?? ?{ "mData": "platform.inner" },
? ?? ?{ "mData": "platform.details.0" },
? ?? ?{ "mData": "platform.details.1" }
? ? ]
??} );
} );
// Using mData as a function to provide different information for
// sorting, filtering and display. In this case, currency (price)
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "aoColumnDefs": [ {
? ?? ?"aTargets": [ 0 ],
? ?? ?"mData": function ( source, type, val ) {
? ?? ???if (type === 'set') {
? ?? ?? ? source.price = val;
? ?? ?? ? // Store the computed dislay and filter values for efficiency
? ?? ?? ? source.price_display = val=="" ? "" : "[? ?? ???DISCUZ_CODE_7? ?? ???]quot;+numberFormat(val);
? ?? ?? ? source.price_filter??= val=="" ? "" : "[? ?? ???DISCUZ_CODE_7? ?? ???]quot;+numberFormat(val)+" "+val;
? ?? ?? ? return;
? ?? ???}
? ?? ???else if (type === 'display') {
? ?? ?? ? return source.price_display;
? ?? ???}
? ?? ???else if (type === 'filter') {
? ?? ?? ? return source.price_filter;
? ?? ???}
? ?? ???// 'sort', 'type' and undefined all just use the integer
? ?? ???return source.price;
? ?? ?}
? ? } ]
??} );
} );

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

// Create a comma separated list from an array of objects
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "sAjaxSource": "sources/deep.txt",
? ? "aoColumns": [
? ?? ?{ "mData": "engine" },
? ?? ?{ "mData": "browser" },
? ?? ?{
? ?? ???"mData": "platform",
? ?? ???"mRender": "[, ].name"
? ?? ?}
? ? ]
??} );
} );
// Use as a function to create a link from the data source
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "aoColumnDefs": [ {
? ?? ?"aTargets": [ 0 ],
? ?? ?"mData": "download_link",
? ?? ?"mRender": function ( data, type, full ) {
? ?? ???return '<a href="'+data+'">Download</a>';
? ?? ?}
? ? } ]
??} );
} );

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

// Make the first column use TH cells
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "aoColumnDefs": [ {
? ?? ?"aTargets": [ 0 ],
? ?? ?"sCellType": "th"
? ? } ]
??} );
} );

sClass：給列加上自己定義的屬性

Default:	Empty string
Type:	string

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sClass": "my_class", "aTargets": [ 0 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "sClass": "my_class" },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ]
??} );
} );

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

// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?{
? ?? ???"sContentPadding": "mmm"
? ?? ?}
? ? ]
??} );
} );

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

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{
? ?? ???"mData": null,
? ?? ???"sDefaultContent": "Edit",
? ?? ???"aTargets": [ -1 ]
? ?? ?}
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?{
? ?? ???"mData": null,
? ?? ???"sDefaultContent": "Edit"
? ?? ?}
? ? ]
??} );
} );

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

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sName": "engine", "aTargets": [ 0 ] },
? ?? ?{ "sName": "browser", "aTargets": [ 1 ] },
? ?? ?{ "sName": "platform", "aTargets": [ 2 ] },
? ?? ?{ "sName": "version", "aTargets": [ 3 ] },
? ?? ?{ "sName": "grade", "aTargets": [ 4 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "sName": "engine" },
? ?? ?{ "sName": "browser" },
? ?? ?{ "sName": "platform" },
? ?? ?{ "sName": "version" },
? ?? ?{ "sName": "grade" }
? ? ]
??} );
} );

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

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },
? ?? ?{ "sType": "numeric", "aTargets": [ 3 ] },
? ?? ?{ "sSortDataType": "dom-select", "aTargets": [ 4 ] },
? ?? ?{ "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?null,
? ?? ?null,
? ?? ?{ "sSortDataType": "dom-text" },
? ?? ?{ "sSortDataType": "dom-text", "sType": "numeric" },
? ?? ?{ "sSortDataType": "dom-select" },
? ?? ?{ "sSortDataType": "dom-checkbox" }
? ? ]
??} );
} );

sTitle?：The title of this column.

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

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sTitle": "My column title", "aTargets": [ 0 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "sTitle": "My column title" },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ]
??} );
} );

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

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sType": "html", "aTargets": [ 0 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "sType": "html" },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ]
??} );
} );

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

// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sWidth": "20%", "aTargets": [ 0 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "sWidth": "20%" },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ]
??} );
} );

三：回調

fnCookieCallback：還沒有使用過
$(document).ready( function () {$('#example').dataTable( {"fnCookieCallback": function (sName, oData, sExpires, sPath) {// Customise oData or sName or whatever else herereturn 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 {vars=(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 browsersif ( 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 = "";}} );
} );

轉載于:https://www.cnblogs.com/wynjauu/articles/9190962.html