前言:最近在做一個WEB后台,無意中發現這個插件,試用了一下覺得不錯,但網上關於它的資料大多不全,所以利用一些時間將其API文檔翻了一下,發在園子里供大家參考。(p.s:個人E文水平很差,對着靈格斯翻出來,肯定有很多不對的地方,歡迎指正,但請勿噴。)
構造函數:
默認帶一個可選參數,該參數為一個對象,可配置項在DataTable.defaults命名空間中定義。
方法和參數說明:
一、靜態屬性
方法或屬性名
|
參數說明
|
返回值類型 |
功能描述
|
應用示例
|
version
|
無
|
string
|
主要供插件開發者使用,用於檢測兼容性。其輸出格式為:a.b.c.d.e。其中abc均為整數,d為描述字符串(dev或beta),e也是一個整數,d和e為可選項。 |
$.fn.dataTable.version
|
二、實例方法
方法或屬性名
|
參數說明
|
返回值類型 |
功能描述
|
應用示例
|
|
$(sSelector, oOpts) | 1、sSelector(字符串或節點名或jquery選擇字符串),指定要選取的行 2、oOpts(js對象,可選),對選擇器的范圍進行再限制,即sSelector只在這個對象規定的范圍中選取。有三個可選參數: (1)filter(應用過濾):字符串,默認值為“none",即不應用。只在被當前應用在table中的過濾器過濾以后的行中選擇,如果當前table沒有應用過濾器,即使設置了filter:"applied"也會在所有行中查找。 (2)order:字符串,默認值為”current"。這個參數默認影響返回數組中TR元素的排序。"current"表示按照表當前正在使用的索引列進行排序,"original"表示按照表最初讀取數據時使用的索引列進行排序。 (3)page:限制選擇是否僅限於當前顯示的頁面。"current"表示僅限於當前頁,"all"表示所有頁。如果此項被設置為"current",則order會被假設為"current",filter為"applied",也就是說即使手動給這兩個參數設置了不同的值也會被忽略。 |
jquery對象 | 使用一個jquery選擇器從表的TR(包含在tbody中的TR)元素中查找符合條件的行的集合(jquery對象) | oTable.$('tr:odd').css('backgroundColor', 'blue'); oTable.$('tr:odd', { order: "current",page:"current" }).css('backgroundColor', 'blue'); |
|
_(sSelector, oOpts) |
同上
|
匹配元素中包含的數據,如果選擇器匹配元素包含非TR、TD或者TH元素,則返回數組對應位置會是一個空條目。 | 使用方式基本同上面的$一樣,但它返回的是所有匹配行的數據--也就是說,sSelector的匹配目標應該是TR行或者是TD/TH單元格而不是其它的元素,因為只有這些行/單元格才包含數據。如果找到匹配的行,返回的數據將是生成該行的原始數據(數組或對象),如果原始數據源來自於DOM,則返回一個通用數組。 這個方法通常和$方法一起配合使用,通過向兩個方法給定同樣的參數,可以保證返回數組中(行集合/數組)索引能夠互相匹配。 注:按照說明的意思,這個方法應該可以獲取單元格的數據,但實際通過測試只能獲取首行的單元格數據,像"tr:eq(2) td:eq(1)"這樣的選擇器返回的是undefined |
|
|
fnAddData(mData, bRedraw) |
1、mData:數組或者對象,必選項。表示要添加到表中的數據,可以是以下四種類型之一:
(1)一維數據數組,表示單行
(2)2維數據數組,表示多行
(3)單個對象,和初始化時定義的mData相對應的數據對象,表示單行
(4)對象數組,同上,表示多行
2、bRedraw:布爾值,可選,默認true,指示是否立即重繪表格。
|
一個整數數組,表示各條新增數據在內置的aoData數組中的索引位置。
|
向表中添加一行或多行數據,注意這個方法僅對處理客戶端數據有效(數據來自於客戶端腳本對象、數組或DOM,或者初始化時指定了sAjaxSource但沒有指定"bServerSide": true),如果數據源指定的是“經過服務端處理”(初始化時指定了"bServerSide": true)的話,要向表中添加新數據,需要先調用一個Ajax方法將數據添加到數據源中,也就是服務端,再由服務端將數據返回給表。
|
oTable.fnAddData([[16, "張三", 55, "男", "1982/12/1"], [54, "李四", 55, "男", "1982/12/1"], [88, "王五", 55, "男", "1982/12/1"]]);
|
|
fnAdjustColumnSizing(bRedraw) |
1、Bredraw:布爾值,可選,默認true,表示是否重繪表。
|
無
|
調用這個方法會使得DataTable根據所包含的數據長度和開發者給列指定的長度(樣式表、DOM中直接指定、或者初始化時指定了sWidth參數)重新計算列寬,並調整表格的顯示,這個方法在表的父容器大小發生變化時相當有用(比如瀏覽器窗口大小變化)。
|
|
|
fnClearTable(bRedraw) |
1、bRedraw:布爾值,可選,默認為true,表示是否立即重繪表格。
|
無
|
快速、直接的清除表中所有數據行。如果bRedraw為false,屏幕顯示不會發生變化,但像$、_方法已經取不到值了。
|
oTable.fnClearTable(false);
|
|
fnClose(nTr) |
1、nTr,html node(也就是TR),代表要被“close”的行。
|
成功返回0,失敗返回1(未找到匹配的行)
|
只針對狀態為“open"的行,功能是關閉當前狀態為“open"的行。
|
$('#example tbody tr').click( function () {
if ( oTable.fnIsOpen(this) ) {
oTable.fnClose( this );
} else {
oTable.fnOpen( this, "Temporary row opened", "info_row" );
}
} );
|
|
fnDeleteRow(mTarget, fnCallBack, bRedraw) |
1、mTarget:混合型,可以是被刪除行在aoData中的索引,也可以是要刪除的TR元素(用jqury選擇器表示)。
2、fnCallBack:函數或者null,可選,回調函數。刪除動作開始時調用,傳遞給此函數的參數有兩個,第一個是一個包含當前表所有初始化信息的對象,第二個是將要被刪除行的數據數組。
3、bRedraw:布爾值,可選,默認true。是否重繪表格。
|
被刪除的行。
|
刪除表中某行。
|
oTable.fnDeleteRow( 0 );
|
|
fnDestroy(bRemove) |
1、bRemove:布爾值,可選,默認false。表示是否完全刪除該表。如果為true,則連原始DOM也會被刪除。
|
無
|
將表恢復為原始定義的html DOM結構,移除應用到table上的樣式和事件監聽。
|
|
|
fnDraw(bComplete) | 1、bComplete:布爾值,可選,默認true。表示在重繪之前是否對表進行重新過濾和重新排序。 |
無
|
重繪表。
|
|
|
fnFilter(sInput, iColumn, bRegex, bSmart, bShowGlobal, bCaseInsensitive) |
1、sInput:字符串,必選,指定要過濾顯示的某列數據的全部或一部分。
2、iColumn,整數或null,可選,指定sInput要匹配的列,從0開始。
3、bRegex,布爾值,可選,默認為false,是否將sInput視為正則表達式。
4、bSmart,布爾值,可選,默認為true,是否開啟智能搜索。(這個API說明有點坑,也沒有示例,通過研究跟蹤源碼才搞明白,如果為true,則如果sInput包含有空格字符,則會以空格為界將其拆分為數組,搜索同時包含數組中每個字符串的行,對應數據可以是一列的內容,也可以不在一列中,如果為false,則將空格視為欲搜索字符)
5、bShowGlobal:布爾值,可選,默認true,是否在表附帶的搜索輸入框中顯示sInput的內容。
6、bCaseInsensitive:布爾值,可選,默認true,是否不區分大小寫
|
無
|
對表中數據進行過濾。 |
|
|
fnGetData(mRow, iCol) |
1、mRow:整數或tr/td/th節點。可選,如果指定一個tr節點則從數據源返回整行的數據,如果指定的是td/th則返回相應單元格中的數據。如果是一個整數,會把這個整數視內部數組aoData的索引,返回對應的數據。
2、iCol:整數,可選,指定列序號。
|
如果無參調用,則返回全表數據;指定了mRow,返回對應行的數據;指定了iCol,返回對應單元格的數據。
|
獲取表的全部數據,如果指定了行和列則返回對應行或列的數據
|
|
|
fnGetNodes(iRow) |
1、iRow:整數,可選,指定要獲取行在表中的序號。這個序號不是顯示出來的行序,而數據在aoData中的序號。
|
無參調用返回包含所有TR元素的數組,指定了iRow,只返回對應行的TR。
|
獲取一個body中包含的TR節點元素數組。 |
|
|
fnGetPosition(nNode) |
1、nNdoe:node,可以是body中的TR、TD、TH元素。
|
如果nNode是TR,則返回該行在表中的顯示序號,即使順序發生了變化,它返回的還是最初的序號;如果nNode是單元格,返回一個數組:[行序,可見列序,全部列序]。
|
返回特定單元格在表中的顯示位置,以數字表示,從0開始,詳見返回值說明。
|
|
|
fnIsOpen(nTr) |
1、nNode:node,要檢查的行(html dom)。
|
當前行狀態為open,則返回true,否則返回false。
|
檢查行的狀態是否為open。
|
|
|
fnOpen(nTr, mHtml, sClass) |
1、nTr:node,被打開(open)的行。
2、mHtml:string\node\jquery,打開行后添加的html內容。
3、sClass:string,設置新添加的單元格的樣式(因為它實際生成的是一個新行,包含一個td來放置mHtml的內容)
|
打開后的添加的新行,如果未找到匹配行,返回undefined。 |
在當前頁面指定行下面添加一個新行並顯示指定的mHtml內容。
|
|
|
fnPageChange(mAction, bRedraw) |
1、mAction:string/int。可取值為:“first","previous","next","last",或者是要跳轉到的頁碼,注意0代表第1頁。
2、bRedraw:bool,可選,默認true,是否重繪表格。
|
無
|
翻頁。
|
|
|
fnSetColumnVis(iCol, bShow, bRedraw) |
1、iCol:int,被顯示或隱藏的列序號,從0開始。
2、bShow:bool,true為顯示,false為隱藏。
3、bRedraw:bool,可選,默認為true,是否重繪。
|
無
|
顯示或隱藏指定列。
|
|
|
fnSettings() | 無 |
指定表的配置對象
|
獲取指定表的配置對象。 |
|
|
fnSort(iCol) |
1、iCol:int,列索引。
|
無
|
按照指定列對表進行排序。
|
|
|
fnSortListener(nNode, iColumn, fnCallback) |
1、nNode:node,要添加監聽程序的元素
2、iColumn:int,指定的索引列
3、fnCallback:function,可選,回調函數
|
無
|
給某個元素添加對應特定列的監聽處理程序。(這個方法暫時還沒有理解)
|
|
|
fnUpdate(mData, mRow, iColumn, bRedraw, bAction) |
1、mData:object/array/string,更新數據
2、mRow:node/int,被更新的TR元素或數組在aoData中索引。
3、iColumn:int,可選,要更新的列。和mRow一起即可確定單元格位置。
4、bRedraw:bool,可選,默認true,是否重繪表格。
5、bAction:bool,可選,默認true,是否執行預重繪動作。
|
成功返回0,錯誤返回1
|
更新表行或單元格數據,該方法既可以接受單一值,也可以接受數組或對象
|
|
|
fnVersionCheck(sVersion) |
1、sVersion:string,版本號,可以是X.Y.Z格式,也可以接受X或X.Y格式。
|
大於等於指定版本號返回true,否則返回false。
|
對比當前DataTable的版本號。
|
|
三、靜態方法
方法或屬性名
|
參數說明
|
返回值類型
|
功能描述
|
應用示例
|
fnIsDataTable(nTable) |
nTable,node,被檢查的table元素。
|
是DataTable表返回true,否則返回false.
|
檢查指定指定table元素是否為DataTable表。 |
|
fnTables(bVisible) |
bVisible:bool,可選,默認false,是否包含被隱藏表。
|
table node數組(注意不是DataTable實例)
|
獲取所有已經初始化的DataTable表。 |
|
fnVersionCheck(sVersion) |
|
|
同實例方法。
|
|
四、事件
事件名稱
|
傳入參數
|
描述
|
destroy |
1、e,event,jquery事件對象
2、o:object,DataTable設置對象
|
DataTable銷毀事件,調用fnDestroy時觸發。
|
draw
|
同上
|
頁面中表重繪時觸發。也可以給fnDrawCallback指定回調函數來綁定此事件。
|
filter
|
同上
|
應用到表的過濾條件發生改變時觸發。 |
init
|
1、2同上
3、json,對象,從服務端獲取的JSON對象。
|
DataTable初始化完成事件,當表完成渲染、裝載數據后觸發。 |
page
|
1、2同上
|
頁面改變事件,當表的當前分頁發生變化是觸發 |
processing
|
1、2同上
3、bShow:boolean,DataTable是否正在執行動作標記
|
正在處理事件,(未測試成功,以下內容為個人理解),當DataTalbe執行一些比較耗時的動作時觸發(如排序、過濾)。可以用來通知用戶DataTable正在執行某個動作,或者某個操作已經完成。
|
sort
|
1、2同上
|
排序事件,表的排序條件發生變化時觸發。 |
stateLoaded
|
1、2同上
3、json:object,保存在客戶端的狀態信息。
|
狀態載入完成事件。當狀態信息已經從本地存儲中載入同時配置對象內容也按照載入數據修改完成時觸發。
|
stateLoadParams |
同上
|
狀態載入時事件。
當狀態信息已經從本地存儲中載入但配置對象內容還未按照載入數據修改時觸發。
|
stateSaveParams | 1、2同上 3、json:object,將要被保存的狀態信息。 |
狀態保存事件,當表的狀態發生變化,需要重新保存狀態信息時觸發。
|
xhr
|
1、2同上
3、json:object,從服務端返回的JSON對象。
|
Ajax事件,當一個服務端Ajax請求完成時觸發(注意,這個事件處理程序由fnServerData調用,如果改寫了
fnServerData,需要在你自己的success函數中手動觸發這個事件)。
|