雖然大多數時候你的Javascript交互將通過使用datatable初始化對象作為描述在使用這個網站的部分,有時,你會發現它有用一些外部控制表。可以使用以下函數從jQuery。dataTable對象。
也有一些插件API函數可用的擴展的功能之外的datatable內置函數描述這個頁面。
注意對於那些使用服務器端處理:大量的API函數假設數據存儲在客戶端完成它,而不是在服務器端。這樣的功能,比如fnAddData和 fnDeleteRow不會影響數據庫的數據上舉行。事實上datatable不知道如果你即使使用一個數據庫!因此,你必須使需要對服務器的調用來操作 數據的要求,然后簡單地重新划定表(fnDraw)來查看新的數據。
$
執行一個jQuery選擇器動作在桌子的TR元素(從中的tbody)和返回結果的jQuery對象。
Input parameters:
- {string|node|jQuery}: jQuery選擇器或節點收集行事
- {object}: 可選參數的修改的行被包括
- {string} [default=none]: 選擇TR元素,滿足當前的篩選標准(“applied”)或所有TR元素(即沒有過濾器)。
- {string} [default=current]: TR元素的順序在處理數組。可以是“當前”,即當前的排序表的使用,或“原創”即原始訂單數據讀入使用的表。
- {string} [default=all]: 限制選擇當前顯示的頁面(“current”)or not(“all”)。如果當前的是給定的,然后順序被認為是“當前”和過濾器是‘應用’,不管它們是什么了
Return parameter:
{
object}: jQuery object,過濾給定的選擇器.
Code example:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Highlight every second row
oTable.$(‘tr:odd’).css(‘backgroundColor’, ‘blue’);
});
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Filter to rows with ‘Webkit’ in them, add a background colour and then
// remove the filter, thus highlighting the ‘Webkit’ rows only.
oTable.fnFilter(‘Webkit’);
oTable.$(‘tr’, {
“filter”: “applied”
}).css(‘backgroundColor’, ‘blue’);
oTable.fnFilter(”);
});
一
在操作幾乎相同的$,但在這種情況下返回的數據匹配的行——因此,jQuery選擇器使用TR行應該匹配節點或TD / THCell節點,而不是任何的后代,所以這些數據能夠獲取的行/單元。如果匹配的行被發現,返回的數據是原始數據數組/對象用於創建行(或一個生成的數 組如果從一個DOM源)。
此方法經常是有用的結合兩$函數給出了相同的參數和數組索引將完全匹配。
Input parameters:
- {string|node|jQuery}: jQuery選擇器或節點收集行事
- {object}: 可選參數的修改的行被包括
- {string} [default=none]: 選擇TR元素,滿足當前的篩選標准(“applied”)或所有TR元素(即沒有過濾器)。
- {string} [default=current]: TR元素的順序在處理數組。可以是“當前”,即當前的排序表的使用,或“原創”即原始訂單數據讀入使用的表。
- {string} [default=all]: 限制選擇當前顯示的頁面(“current”)or not(“all”)。如果當前的是給定的,然后順序被認為是“當前”和過濾器是‘應用’,不管它們是什么了
Return parameter:
{array}:數據匹配的元素。如果任何元素,結果的選擇器,沒有TR,TD或TH元素在DataTable,他們將有一個空條目數組中。
Code example:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Get the data from the first row in the table
var data = oTable._(‘tr:first’);
// Do something useful with the data
alert(“First cell is: ” + data[0]);
});
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Filter to ‘Webkit’ and get all data for
oTable.fnFilter(‘Webkit’);
var data = oTable._(‘tr’, {
“filter”: “applied”
});
// Do something with the data
alert(data.length + ” rows matched the filter”);
});
fnAddData
添加一個新行或多行數據到表。請注意,這是適合客戶端處理只有——如果您使用的是服務器端處理(即。“bServerSide”:真正的),然后添加數據,您必須將它添加到數據源,即服務器端,通過一個Ajax調用。
Input parameters:
1.{array|object}: 數據添加到表。這可以:
1D array of data -添加一個單一行提供的數據
2D array of arrays -添加多行的一個調用
object -數據對象在使用mData
array of objects -多個數據對象使用mData
2.{bool} [default=true]: 重繪表或不重繪
Return parameter:
{array}:整數數組,代表了在aoData列表的索引({ @link DataTable.models.oSettings })被添加到表
Code example:
// Global var for counter
var giCount = 2;
$(document).ready(function() {
$(‘#example’).dataTable();
});
function fnClickAddRow() {
$(‘#example’).dataTable().fnAddData([giCount + ".1", giCount + ".2", giCount + ".3", giCount + ".4"]);
giCount++;
}
fnAdjustColumnSizing
這個函數將使datatable重新計算列的大小,根據表中的數據和大小應用到列(在DOM中,CSS或通過sWidth參數)。 這可能是有用的,寬度的表的父元素的變化(例如一個窗口大小調整)。
Input parameters:輸入參數: {boolean} [default=true]: 重繪或不重繪,你通常會想
Return parameter:返回參數:
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable({
“sScrollY”: “200px”,
“bPaginate”: false
});
$(window).bind(‘resize’,
function() {
oTable.fnAdjustColumnSizing();
});
});
fnClearTable
快速而簡單地清楚一個表
Input parameters:輸入參數: {bool} [default=true]: 重繪或不重繪
Return parameter:返回參數:
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Immediately ‘nuke’ the current rows (perhaps waiting for an Ajax callback…)
oTable.fnClearTable();
});
fnClose
相反,打開的一行,此函數將關閉任何行目前是“open”。
Input parameters:輸入參數: {node}: the table row to ‘close’
Return parameter:返回參數: {int}:0成功,或1如果失敗(找不到行)
Code example:代碼示例:
$(document).ready(function() {
var oTable;
// ‘open’ an information row when a row is clicked on
$(‘#example tbody tr’).click(function() {
if (oTable.fnIsOpen(this)) {
oTable.fnClose(this);
} else {
oTable.fnOpen(this, “Temporary row opened”, “info_row”);
}
});
oTable = $(‘#example’).dataTable();
});
fnDeleteRow
為表刪除一行
Input parameters:輸入參數: {mixed}:該指數從aoData的行被刪除,或TR元素你想刪除
{function|null}: Callback function
{bool} [default=true]: 重繪或不是重繪
Return parameter:返回參數: {array}: 行被刪除
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Immediately remove the first row
oTable.fnDeleteRow(0);
});
fnDestroy
恢復表本來的狀態在DOM中刪除所有datatable的增強,修改DOM結構的表和事件監聽器。
Input parameters:輸入參數: {boolean} [default=false]:完全刪除表從DOM
Return parameter:返回參數:
Code example:代碼示例:
$(document).ready(function() {
// This example is fairly pointless in reality, but shows how fnDestroy can be used
var oTable = $(‘#example’).dataTable();
oTable.fnDestroy();
});
fnDraw
Show details Redraw the table重繪
Input parameters:輸入參數: {bool} [default=true]: 重新過濾和重新排序(如果啟用)表在畫表之前。
Return parameter:返回參數:
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Re-draw the table – you wouldn’t want to do it here, but it’s an example
oTable.fnDraw();
});
fnFilter
基於數據過濾輸入
Input parameters:輸入參數: {string}: 字符串來過濾表
{int|null}:列來限制過濾來
{bool} [default=false]: 使用正則表達式或不使用
{bool} [default=true]: 執行智能過濾或不是
{bool} [default=true]: 顯示輸入全局過濾器在它的輸入框
{bool} [default=true]:做不區分大小寫匹配(true)或不(false)
Return parameter:返回參數:
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Sometime later – filter…
oTable.fnFilter(‘test string’);
});
fnGetData
獲取數據對整個表,一個單獨的行或單個Cell基於提供的參數。
Input parameters:輸入參數: {int|node}: 一個TR行節點, TD/TH cell 節點 或一個整數。 如果給定作為TR節點那么數據來源將返回整個行。如果給出一個TD / THCell節點然后iCol將自動計算並返回的數據單元。如果作為一個整數,那么這可以看作是aoData內部數據索引的行(參見 fnGetPosition)和數據使用那一行。
{int}: 可選的列的索引,您想要的數據。
Return parameter:返回參數: {array|object|string}: 如果mRow是未定義,那么數據返回所有行。如果mRow被定義,只是數據,並iCol那一行定義,只有數據返回指定的Cell。
Code example:代碼示例:
// 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);
});
});
fnGetNodes
得到一個數組的TR節點用於表的身體。注意,您通常會希望使用’$’ API方法優先於這個因為它更靈活。
Input parameters:輸入參數: {int}:可選的行指數為TR元素你想要的
Return parameter:返回參數: {array|node}: 如果iRow是未定義的,返回一個數組中的元素的所有TR表的身體,或iRow被定義,只是TR元素要求。
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Get the nodes from the table
var nNodes = oTable.fnGetNodes();
});
fnGetPosition
得到數組索引特定Cell從它的DOM元素和列索引包括隱藏的列
Input parameters:輸入參數: {node}: 這可以是一個TR TD或TH,在表的body
Return parameter:返回參數: {int}: 如果nNode為TR,然后返回一個索引,或者作為一個單元,一個數組(行索引、列索引(可見)、列索引(所有)]了。
Code example:代碼示例:
$(document).ready(function() {
$(‘#example tbody td’).click(function() {
// Get the position of the current data from the node
var aPos = oTable.fnGetPosition(this);
// Get the data array for this row
var aData = oTable.fnGetData(aPos[0]);
// Update the data array and return the value
aData[aPos[1]] = ‘clicked’;
this.innerHTML = ‘clicked’;
});
// Init DataTables
oTable = $(‘#example’).dataTable();
});
fnIsOpen
檢查一行是“open”or not。
Input parameters:輸入參數: {node}: 表行檢查
Return parameter:返回參數: {boolean}: true如果行目前是‘open’,false否則
Code example:代碼示例:
$(document).ready(function() {
var oTable; // ‘open’ an information row when a row is clicked on
$(‘#example tbody tr’).click(function() {
if (oTable.fnIsOpen(this)) {
oTable.fnClose(this);
} else {
oTable.fnOpen(this, “Temporary row opened”, “info_row”);
}
});
oTable = $(‘#example’).dataTable();
});
fnOpen
這個函數將一個新行后直接行目前顯示在頁面上,用HTML內容傳遞到函數。這可以使用,例如,要求確認某一記錄應該被刪除。
Input parameters:輸入參數: {node}: The table row to ‘open’
{string|node|jQuery}: HTML放入行
{string}: Class to give the new TD cell
Return parameter:返回參數: {node}: 行已經打開。注意,如果表行傳入的第一個參數,不存在表,這個方法將返回。
Code example:代碼示例:
$(document).ready(function() {
var oTable;
// ‘open’ an information row when a row is clicked on
$(‘#example tbody tr’).click(function() {
if (oTable.fnIsOpen(this)) {
oTable.fnClose(this);
} else {
oTable.fnOpen(this, “Temporary row opened”, “info_row”);
}
});
oTable = $(‘#example’).dataTable();
});
fnPageChange
改變分頁-提供內部邏輯分頁在一個簡單的API函數。您可以使用此函數有一個datatable表進行下一個,以前,第一或最后一頁。
Input parameters:輸入參數: {string|int}: Paging action to take: “first”, “previous”, “next” or “last” or page number to jump to (integer),注意 page 0 is the first page.
{bool} [default=true]: 重繪或不重繪
Return parameter:返回參數:
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
oTable.fnPageChange(‘next’);
});
fnSetColumnVis
顯示一個特定列
Input parameters:輸入參數: {int}: 列的顯示被改變
{bool}: Show (true) or hide (false) the column
{bool} [default=true]: 重繪或不重繪
Return parameter:返回參數:
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Hide the second column after initialisation
oTable.fnSetColumnVis(1, false);
});
fnSettings
得到設置為特定的表為外部操作
Input parameters:輸入參數:
Return parameter:返回參數: {object}: datatable設置對象。See {@link DataTable.models.oSettings}看到{ @link DataTable.models.oSettings }
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
var oSettings = oTable.fnSettings();
// Show an example parameter from the settings
alert(oSettings._iDisplayStart);
});
fnSort
由一個特定的表排序的列
Input parameters:輸入參數: {int}: 數據索引來排序。注意,這將不匹配”display index”如果你有隱藏的數據條目
Return parameter:返回參數:
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Sort immediately with columns 0 and 1
oTable.fnSort([[0, 'asc'], [1, 'asc']]);
});
fnSortListener
添加一個排序偵聽器給一個給定的列元素
Input parameters:輸入參數: {node}: 元素附加排序偵聽器
{int}: 列單擊該節點將排序
{function}: 回調函數運行時進行排序
Return parameter:返回參數:
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
// Sort on column 1, when ‘sorter’ is clicked on
oTable.fnSortListener(document.getElementByIdx_x(‘sorter’), 1);
});
fnUpdate
更新一個表格單元格或行——這種方法將接受單個值來更新Cell,數組和一個元素的值為每一列或一個物體在相同的 式與原始數據源。自參照的功能是為了使多列更新變得更為容易。
Input parameters:輸入參數: {object|array|string}: 數據來更新cell/row
{node|int}:TR元素你想更新或aoData index
{int}: 列更新(不使用的mData是一個數組或對象)
{bool} [default=true]: 重繪或不是
{bool} [default=true]:執行pre-draw actions 或不是
Return parameter:返回參數: {int}:0成功,1上的錯誤
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
oTable.fnUpdate(‘Example update’, 0, 0);
// Single cell
oTable.fnUpdate(['a', 'b', 'c', 'd', 'e'], 1, 0);
// Row
});
fnVersionCheck
提供一個共同的方法插件檢查正在使用的版本的datatable,為了確保兼容性。
Input parameters:輸入參數: {string}: 版本字符串來檢查,在格式“x y z”。注意格式“X”和“X y”也是可以接受的。
Return parameter:返回參數: {boolean}: 真如果這個版本的datatable是大於或等於所需的版本,或假如果這個版本的DataTales是不合適的
Code example:代碼示例:
$(document).ready(function() {
var oTable = $(‘#example’).dataTable();
alert(oTable.fnVersionCheck(’1.9.0′));
});