API
DataTables 及其擴充功能具有廣泛的 API,可用於存取表格中包含的資料,以及在初始化完成後以其他方式操作表格。DataTables API 的設計旨在反映表格中資料的結構,以及您通常希望與表格互動的方式。因此,API 由六個主要區域組成,用於處理表格及其資料
- 表格
- 欄
- 列
- 儲存格
- 核心
- 公用程式
擴充功能和 外掛程式也可以將其他方法新增至 API,以公開它們新增至 DataTable 的功能。
如需 API 中可用方法的完整清單,請參閱 API 參考區段。
術語
為了保持 API 文件簡潔,使用了許多術語來描述或指稱 API 的各個方面。這些術語在此定義
- 執行個體 - API 的執行個體是指一個單一物件執行個體,該執行個體是指一組特定的 DataTable 表格(即
new Api()
的結果)。 - 結果集 - 由 API 執行個體保存的資料。DataTables API 執行個體是「類似陣列」的,因為它們以與純 JavaScript 陣列相同的方式保存資料(因此可以使用陣列
[]
符號存取),並且具有許多相同的方法(例如sort()
和push()
)。這與 jQuery 在本質上類似陣列的方式非常相似。 - 內容 - API 執行個體的內容描述 API 執行個體連結到的 DataTables。每個 API 執行個體都可以參考一個或多個 DataTables 表格,並能夠對這些表格執行操作(有關詳細資訊,請參閱下文)。
存取 API
可以透過四種不同的方式之一,為一個或多個表格取得新的 DataTables API 執行個體
$( selector ).DataTable();
$( selector ).dataTable().api();
new $.fn.dataTable.Api( selector );
new DataTable( selector, options );
自 v1.11 起。
每個結果都是 DataTables API 物件的執行個體,該執行個體的內容中具有選取器找到的表格。
請務必注意 $( selector ).DataTable()
和 $( selector ).dataTable()
之間的差異。前者傳回 DataTables API 執行個體,而後者傳回 jQuery
物件。api()
方法會新增至 jQuery 物件,因此您可以輕鬆存取 API,但 jQuery 物件可用於操作表格節點,就像使用任何其他 jQuery 執行個體一樣(例如使用 addClass()
等)。
鏈結
與 jQuery 類似,DataTables API 廣泛使用鏈結,其中許多(但不是全部)DataTables 方法會傳回 API 執行個體本身,因此您可以立即呼叫另一個 API 方法。例如
var table = $('#example').DataTable();
table.search( 'Fiona' ).draw();
這是在單行上使用兩種不同的 API 方法 search()
和 draw()
。它可以同樣地寫成
var table = $('#example').DataTable();
table.search( 'Fiona' );
table.draw();
在此情況下,功能完全相同,但鏈結可以允許更簡潔且更具表達性的程式碼。
DataTables API 與 jQuery 的鏈結方法不同之處在於,DataTables 使用巢狀方法和屬性。例如,ajax.json()
方法可讓您存取 DataTables 進行 Ajax 呼叫的最新 JSON 資料 - 在此情況下,json()
方法是 ajax
屬性的子項。同樣地,columns()
(和其他資料操作方法)提供自己的鏈結子方法。例如 columns().visible()
。這讓 API 在您存取資料的方式方面具有很高的表達能力,方法與之前呼叫的內容相關。
API 的所有最上層方法始終在 API 的所有巢狀層級都可用。例如,draw()
是最上層方法,但在從表格中移除列後可以呼叫它:table.row( selector ).remove().draw();
。
請注意,並非所有方法都會傳回用於鏈結的 API 執行個體。在某些情況下,傳回用於鏈結的 API 執行個體並不適合,例如 cell().node()
來取得 td
/ th
元素。API 參考文件包含每個方法及其將傳回內容的完整詳細資料。
多個表格
DataTables API 執行個體可以在其內容中參考多個表格。API 將內容中的每個表格視為相同。例如
var tables = $('.dataTable').DataTable();
tables.page( 'next' ).draw( false );
此程式碼將選取文件中具有類別 dataTable
的所有表格,並將它們全部跳到其下一頁資料顯示(使用 page()
)。
同樣地,如果需要,API 執行個體可以參考單一表格,只需變更用於建立 API 執行個體的 jQuery 選取器:例如,$('#myTable').DataTable();
將建立一個在其內容中具有單一表格的 API 執行個體。
複數 / 單數
在使用 API 時,您會注意到方法廣泛使用複數和單數術語。雖然這在 API 中相對不常見,但這樣做是為了反映您存取表格中資料的方式 - 例如,rows().data()
將傳回 API 執行個體,其結果集中包含選取列的資料(即像陣列),而 row().data()
將僅傳回該列的資料。這使得使用 API 更加直覺,因為您始終會得到預期的結果。
為了清楚起見,在英文中(針對我們的國際使用者)
- 單數 === 1
- 複數 > 1
因此,如果您想使用其中一個選取器方法來選取多個項目,請使用方法的複數形式。如果您想選取單一特定項目,請使用單數形式。
範例 - 欄篩選
API 參考文件包含每個 API 方法的範例,以及它執行的操作、傳回的內容和它將接受的參數的詳細說明;但是,讓我們將上述概念形成一個詳細的逐行範例,說明如何使用 DataTables API。在本例中,我們在表格中每欄的頁尾儲存格中建立一個 select
元素,其中包含該欄的資料,並將用於搜尋表格。
var table = $('#example').DataTable();
table.columns().flatten().each( function ( colIdx ) {
// Create the select list and search operation
var select = $('<select />')
.appendTo(
table.column(colIdx).footer()
)
.on( 'change', function () {
table
.column( colIdx )
.search( $(this).val() )
.draw();
} );
// Get the search data for the first column and add to the select list
table
.column( colIdx )
.cache( 'search' )
.sort()
.unique()
.each( function ( d ) {
select.append( $('<option value="'+d+'">'+d+'</option>') );
} );
} );
- 第 1 行 - 取得 DataTables API 的執行個體,其內容中包含單一表格
- 第 3 行 - 使用
columns()
方法選取表格中的所有欄。flatten()
用於將columns()
傳回的 2D 陣列縮減為 1D 欄索引陣列,並且公用程式方法each()
用於對每個選取的欄執行動作。 - 第 5 行 - 建立欄篩選器的
select
元素 - 第 7 行 - 使用
column().footer()
方法取得頁尾儲存格元素,以在其中插入選取輸入。 - 第 9 行 - 使用 jQuery on() 方法在
select
元素的值變更時執行動作 - 在此情況下,搜尋表格。 - 第 10 - 13 行 - 使用
column().search()
排隊搜尋,並將draw()
鏈結到結果以更新表格的顯示。 - 第 17 - 19 行 - 使用
column().cache()
方法,從 DataTables 用於搜尋表格的欄取得資料。 - 第 20 - 21 行 - 公用程式方法
sort()
和unique()
用於將資料縮減為您想要呈現給最終使用者的井然有序清單。 - 第 22 - 24 行 - 將搜尋字詞選項新增至我們的
select
清單,準備使用。
如您所見,DataTables API 非常靈活,並提供廣泛的選項來存取和操作表格。請參閱 API 參考文件以取得可用方法的完整清單。此外,Editor 等外掛程式可以使用自訂方法(例如 row().edit()
和 cell().edit()
等選項)擴充 API。