按鈕

與互動式表格一起使用的常見 UI 範例是呈現會觸發某些動作的按鈕 - 這可能是更改表格的狀態、修改表格中的資料、從表格收集資料，甚至是啟動某些外部程序。顯示這些按鈕是一種最終使用者習慣的介面，讓他們在使用表格時感到賓至如歸。

DataTables 的 Buttons 函式庫提供了一個框架，其中包含可用於 DataTables 的常見選項和 API，但也具有非常高的擴充性，因為您可能會想使用一些對您的應用程式來說獨一無二的按鈕。

Buttons 具有 四組外掛程式，它們是核心軟體的一部分 - 它們不是內建在核心中，而是當您需要它們時才包含進來，只選擇您需要的軟體。其他擴充功能（例如 Editor 和 Select）也提供了與此函式庫一起使用的按鈕，其動作對其自身的行為來說是獨一無二的。這確保了與您的表格互動時的一致介面。

下載

取得和使用 Buttons 最簡單的方法是使用 DataTables 下載產生器，您可以在其中選擇要在頁面上使用的軟體，並為您建立和託管單個 Javascript 和 CSS 檔案。

或者，可以在您的頁面上包含個別檔案、下載發行套件或在 GitHub 上複製原始碼控制儲存庫。

初始化

Buttons 函式庫可以使用多種不同的方式初始化和使用

• 作為 DataTables 建構函式的一部分，使用 layout 選項和 buttons 功能（或者為了向後相容，使用頂層 buttons 物件）。
• new 建構函式
• 舊版 dom 選項

請務必注意，可以建立多個 Buttons 實例以用於 DataTable。如果您想要向最終使用者呈現不同的按鈕集（例如表格上方和下方），這會特別有用。

在 DataTables 中

作為 DataTables 建構函式的一部分，buttons 功能可以與 layout 選項一起使用，以將按鈕（或按鈕的多個實例）放置在表格周圍。下面的範例顯示了特定按鈕集的組態。有關如何進一步設定按鈕，請參閱範例。

new DataTable('#myTable', {
    layout: {
        topStart: {
            buttons: [
                'copy', 'excel', 'pdf'
            ]
        }
    }
});

請注意，為了向後相容，也可以透過頂層 buttons 選項來定義按鈕組態（此方法僅限於每個表格一組按鈕），如下所示

new DataTable('#myTable', {
    buttons: [
        'copy', 'excel', 'pdf'
    ],
    layout: {
        topStart: 'buttons'
    }
});

建構函式

也可以使用 Javascript new 關鍵字和 DataTable.Buttons 函數來建立按鈕實例。此函數接受兩個參數

1. 將按鈕套用至的 DataTable 實例
2. 按鈕選項（這與 buttons 選項可用的選項相同）。

let table = new DataTable('#myTable');

new DataTable.Buttons(table, {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
});

當您希望將按鈕呈現在表格附近以外的其他位置時，此初始化方法特別有用。使用 buttons().container() 方法來取得按鈕的容器元素，以便您可以將其插入到您需要的 DOM 中

table.buttons().container()
    .appendTo( '#toolbar' );

舊版 dom 選項

如果您使用的是 DataTables 1.x 程式碼，您可能會看到正在使用 dom 參數，該參數使用 ASCII 字串來定義將表格控制元素放置在何處。按鈕的字母是 B - 例如

$('#myTable').DataTable({
    dom: 'Bftip',
    buttons: [
        'copy', 'excel', 'pdf'
    ]
});

這仍然可以在 DataTables 2 中使用（但不能與 layout 同時使用 - 它們是互斥的），但建議您更新以使用 layout。

功能

按鈕提供下列功能