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。