按鈕設定
DataTables 擴充功能提供了許多預先設定的按鈕,這些按鈕可以直接使用,無需任何自訂。然而,您將不可避免地希望修改按鈕屬性以符合您的需求 - 這可以簡單到更改顯示的文字,或複雜到提供自訂回呼來修改 PDF 文件的佈局!
自訂按鈕
[索引](initialisation guide) 顯示如何透過使用與按鈕名稱匹配的簡單字串來參照按鈕類型來使用按鈕
$('#myTable').DataTable( {
buttons: [
'copy', 'excel', 'pdf'
]
} );
這會告訴 Buttons 簡單地使用該名稱按鈕的預設選項。字串會由 Buttons 自動擴展為按鈕定義物件 - 此物件包含按鈕的個別屬性。
我們也可以傳遞一個物件,該物件從可用的按鈕擴展而來
$('#myTable').DataTable( {
buttons: [
{
extend: 'copy',
text: 'Copy to clipboard'
},
'excel',
'pdf'
]
} );
請注意,我們仍然像以前一樣有三個按鈕,但第一個按鈕,最初由字串表示,已被物件取代。 buttons.buttons.extend
選項用於告訴 Buttons 使用哪個按鈕類型作為按鈕的基礎 (如果您希望定義自訂按鈕,則此為可選!) 。
在上面的例子中,buttons.buttons.text
選項已用於設定按鈕的文字。此選項適用於所有按鈕 - 有許多常用選項 (見下文),而且每個按鈕類型還可以定義特定於自身的選項 - 應參閱每個按鈕的參考文件,以了解可用的完整選項。
擴展此概念 - 使用 { extend: 'excel' }
(即沒有其他參數)的功能等同於簡單地使用 'excel'
!
內建選項
Buttons 函式庫提供了許多核心選項,這些選項適用於所有按鈕類型。其中最常用的是
buttons.buttons.action
- 啟動按鈕時要執行的動作buttons.buttons.className
- 設定按鈕的類別名稱buttons.buttons.extend
- 定義按鈕應基於哪種按鈕類型buttons.buttons.key
- 定義按鈕的啟動鍵buttons.buttons.text
- 按鈕中顯示的文字
完整的選項列表可在初始化選項參考中找到。
按鍵存取
Buttons 更有趣的內建選項之一是 buttons.buttons.key
選項。這提供了分配自訂按鍵以觸發按鈕動作的能力。例如,您可以設定為按下 e
鍵(無論是否有任何修飾鍵)將觸發編輯選取的列。
只有當頁面上沒有其他焦點元素時,才會執行按鍵操作。因此,舉例來說,如果您將一個按鈕綁定到 e
鍵,而使用者正在 DataTables 搜尋框中輸入文字,那麼當他們按下 e
鍵時,它不會觸發!
buttons.buttons.key
選項可以作為字串(簡單的字元綁定)或物件給出,該物件也允許需要修飾鍵。
例如,請考慮
$('#myTable').DataTable( {
buttons: [
{
extend: 'copy',
text: '<u>C</u>opy',
key: {
key: 'c',
altKey: true
}
}
]
} );
在這種情況下,當按下 alt 鍵 + c 鍵組合時,會觸發複製動作。另請注意,text
屬性已用於向最終使用者強調 c
鍵將執行某些操作。