API 整合

選取功能 (Select) 為終端使用者提供一個介面，讓他們可以透過點擊表格元素來選取項目。這就是終端使用者真正需要知道的軟體功能，但這只是一半的事實！身為程式設計師的您，需要知道何時選取了項目，並且需要能夠檢索這些項目以處理該選取！

這是透過 DataTables API 完成的，選取功能 (Select) 擴充了此 API，使其可以進行這些操作。

檢索已選取的項目

DataTables 有三種主要方法可以從 DataTable 取得項目（以及三個相符的單數項目）

• rows() 和 row() 用於選取列
• columns() 和 column() 用於選取欄
• cells() 和 cell() 用於選取儲存格

這些方法都有各自的選項，可以用於選取特定的項目，但它們都提供一個選項，可以傳遞 selector-modifier 選項。此選項用於告知 API 如何排序和篩選可以選取的項目。選取功能 (Select) 會在此選項中新增一個 selected 選項至 selector-modifier 物件。當為 true 時，它將傳回已選取的項目；當為 false 時，它將傳回未選取的項目。如果為 undefined，則它不會執行任何動作。

例如，考慮以下情況

var table = $('#myTable').DataTable();

table.rows( { selected: true } ).data();

這將檢索任何已選取列的資料（使用 rows().data()）。如果需要，我們可以將其與其他 selector-modifier 選項一起使用

table
    .rows( {
        selected: true,
        page: 'current'
    } )
    .nodes();

在此情況下，會傳回目前頁面上所選取項目的列節點 (rows().nodes())。

當然，這可以與一般列選取器組合使用

table.rows( '.important', { selected: true } ).data();

將取得已選取且具有 important 類別的任何列的資料。

同樣地，我們可以對其他表格選取 API 方法執行類似的動作，例如

table.cells( { selected: true } ).data();

如果使用儲存格選取選項，則會取得已選取的儲存格。

在使用 API 和選取列時，值得注意的是，any() 和 count() 輔助方法可以幫助您了解是否已選取項目以及選取了多少項目。

項目選取

除了可以使用 DataTables API 檢索已選取的項目之外，也可以使用 API 選取和取消選取項目。這是使用以下複數函式及其單數對應項完成的

• rows().select() / rows().deselect()
• columns().select() / columns().deselect()
• cells().select() / cells().deselect()

例如，要選取所有具有 important 類別的列，請使用

table.rows( '.important' ).select();

如果您不想使用選取功能 (Select) 提供的選項，也可以使用此方法來實作您自己的項目選取介面。例如，請考慮以下情況

$('#myTable').on( 'click', 'tbody tr', function () {
    if ( table.row( this, { selected: true } ).any() ) {
        table.row( this ).deselect();
    }
    else {
        table.row( this ).select();
    }
} );

此程式碼將切換表格中列的選取狀態。逐行說明如下

• 第 1 行 - 將委派的事件監聽器附加至表格中的列
• 第 2 行 - 檢查是否已選取該列
• 第 3 行 - 如果已選取，則取消選取
• 第 6 行 - 如果未選取，則選取它

事件

最後一個環節是要知道何時選取了項目。這是透過選取功能 (Select) 發出的事件來完成的，特別是 select 和 deselect 事件。可以使用標準 DataTables 事件模型來監聽這些事件。

使用選取功能 (Select) 時，很自然地會使用 DataTables 的 按鈕擴充套件 (Buttons extension)，讓使用者可以選取項目，然後按一下按鈕來觸發對這些項目的動作。

選取功能 (Select) 提供 selected 和 selectedSingle 按鈕，以便與按鈕擴充套件 (Buttons) 搭配使用，方便您在選取項目時提供自己的動作。當沒有選取項目時（在 selectedSingle 的情況下，當選取多個項目時），這些按鈕會自動停用，而在選取項目時會啟用。

例如，請考慮以下情況，它使用 selected 按鈕來簡單地告訴您選取了多少列

$('#myTable').DataTable( {
    select: true,
    buttons: [
        {
            extend: 'selected',
            action: function ( e, dt, node, config ) {
                var rows = dt.rows( { selected: true } ).count();

                alert( 'There are '+rows+'(s) selected in the table' );
            }
        }
    ]
} );