DataTables
進階互動
表格的功能。
Editor
全面的編輯
DataTables 的函式庫。
手冊
下載
≡ 顯示網站導覽

按鈕選項

此擴充功能現已停用，並由 Buttons 和 Select 擴充功能取代。此文件僅保留供舊版參考。新專案應優先使用 Buttons 和 Select，而非 TableTools。

通常在使用 TableTools 時，您會希望修改預定義按鈕的行為，以符合您的網站或 Web 應用程式所需互動。這可以透過使用 TableTools 提供的每個按鈕類型的選項來實現。TableTools 內建了多種按鈕類型：flash、print、text、ajax 和 collection，並且每個按鈕都有其自己的屬性，如下所述。

  • 通用選項
  • Ajax 選項
  • 集合選項
  • Flash 選項
  • 列印選項
  • 文字選項

在 TableTools 中修改按鈕屬性的基本原則是，您定義一個自訂按鈕，基於其中一個預定義的類型並擴充它（根據需要覆蓋預設屬性）。在下面的示例中，我們透過擴充「文字」預定義按鈕並設定其文字來建立一個新按鈕，但將所有其他屬性保持不變。

通用選項（適用於所有按鈕類型）

fnCellRender
顯示詳細資訊 		用於修改透過 fnGetTableData API 方法（用於匯出資料）從表格讀取的資料。這允許在匯出資料之前對資料進行預處理 - 例如，去除 HTML 的某些部分或在其他資料後附加字尾。
預設值
輸入參數
  1. * - 來自儲存格資料的值
  2. int - 正在讀取的欄號
  3. node - 該列的 TR 元素
  4. int - 該列的內部 DataTables 快取索引（基於 fnGetPosition）
回傳參數 要匯出的資料
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnCellRender": function ( sValue, iColumn, nTr, iDataIndex ) { // 如果欄位 5，則附加文字 'TableTools' if ( iColumn === 5 ) { return sValue +" TableTools"; } return sValue; } } ] } } ); } );
fnClick
顯示詳細資訊 		當按鈕被點擊時的回呼函式。
預設值
輸入參數
  1. node - 已啟用回呼的按鈕元素
  2. object - 按鈕定義物件，包含按鈕的所有初始化屬性。
  3. object - 用於控制 Flash 按鈕的 Zeroclipboard 實例。請注意，對於非 Flash 的按鈕，此值為 null。
回傳參數 void
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnClick": function ( nButton, oConfig, oFlash ) { alert( '滑鼠點擊' ); } } ] } } ); } );
fnComplete
顯示詳細資訊 		當按鈕需要執行的任何動作完成時，會啟用此回呼函式。這對於基於 Flash 的按鈕特別有用，因為它會在 Flash 執行的任何動作之後啟用（例如儲存檔案）。
預設值
輸入參數
  1. node - 已啟用回呼的按鈕元素
  2. object - 按鈕定義物件，包含按鈕的所有初始化屬性。
  3. object - 用於控制 Flash 按鈕的 Zeroclipboard 實例。請注意，對於非 Flash 的按鈕，此值為 null。
  4. string - 從 Flash 影片片段回傳的文字。
回傳參數 void
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnComplete": function ( nButton, oConfig, oFlash, sFlash ) { alert( '按鈕動作完成' ); } } ] } } ); } );
fnInit
顯示詳細資訊 		當按鈕由 TableTools 程式碼建立和初始化時呼叫的回呼函式。這允許在將按鈕插入 DOM 之前修改按鈕（例如新增類別）。
預設值
輸入參數
  1. node - 已啟用回呼的按鈕元素
  2. object - 按鈕定義物件，包含按鈕的所有初始化屬性。
回傳參數 void
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnInit": function ( nButton, oConfig ) { alert( '按鈕已初始化' ); } } ] } } ); } );
fnMouseout
顯示詳細資訊 		當滑鼠離開按鈕時的回呼函式。
預設值
輸入參數
  1. node - 已啟用回呼的按鈕元素
  2. object - 按鈕定義物件，包含按鈕的所有初始化屬性。
  3. object - 用於控制 Flash 按鈕的 Zeroclipboard 實例。請注意，對於非 Flash 的按鈕，此值為 null。
回傳參數 void
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnMouseout": function ( nButton, oConfig, oFlash ) { alert( '滑鼠移開' ); } } ] } } ); } );
fnMouseover
顯示詳細資訊 		當滑鼠懸停在按鈕上方時的回呼函式。
預設值
輸入參數
  1. node - 已啟用回呼的按鈕元素
  2. object - 按鈕定義物件，包含按鈕的所有初始化屬性。
  3. object - 用於控制 Flash 按鈕的 Zeroclipboard 實例。請注意，對於非 Flash 的按鈕，此值為 null。
回傳參數 void
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnMouseover": function ( nButton, oConfig, oFlash ) { alert( '滑鼠移入' ); } } ] } } ); } );
fnSelect
顯示詳細資訊 		當在表格中選取列時呼叫的函式。這允許在表格列選取狀態變更時對按鈕執行操作（例如新增和移除類別）。
預設值
輸入參數
  1. node - 已啟用回呼的按鈕元素
  2. object - 按鈕定義物件，包含按鈕的所有初始化屬性。
  3. node - 被點擊的 TR 列節點。
回傳參數 void
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "fnSelect": function ( nButton, oConfig, nRow ) { alert( '已選取列' ); } } ] } } ); } );
oSelectorOpts
顯示詳細資訊 		控制要從來源 DataTable 使用的資料。DataTables 能夠透過其 $ API 方法選取要使用的列以及它們的使用順序。此選項也為 TableTools 匯出按鈕提供此功能，因此您可以僅匯出目前的資料（例如）。
預設值
類型 物件
程式碼範例 
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
    "aButtons": [
        {
            "sExtends": "copy",
            "sButtonText": "Copy to clipboard",
            "oSelectorOpts": {
                page: 'current'
            }
        }
    ]
}
} );
sAction
顯示詳細資訊 		動作會告知 TableTools 應將新建立的按鈕視為哪種按鈕 - 可以使用該按鈕執行的動作將取決於此設定。它可以是下列其中一項：「flash_save」、「flash_copy」、「flash_pdf」、「print」、「text」或「collection」。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "xls", "sAction": "flash_save" } ] } } ); } );
sButtonClass
顯示詳細資訊 		設定按鈕處於非滑鼠移入狀態時的類別。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sButtonClass": "my_button_class" } ] } } ); } );
sButtonText
顯示詳細資訊 		將按鈕的文字設定為自訂字串。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sButtonText": "儲存 CSV 檔案！" } ] } } ); } );
sExtends
顯示詳細資訊 		通常使用預定義的按鈕並根據需要擴充它們會很有用。此屬性應與其中一個預定義按鈕匹配，以準確提供此功能。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "sButtonText": "Hello world" } ] } } ); } );

Ajax 按鈕選項

bFooter
顯示詳細資訊 		是否在匯出的資料中包含頁尾。
預設值 true
類型 布林值
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "bFooter": false } ] } } ); } );
bHeader
顯示詳細資訊 		是否在匯出的資料中包含頁首。
預設值 true
類型 布林值
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "bFooter": false } ] } } ); } );
fnAjaxComplete
顯示詳細資訊 		這是 Ajax 載入完成時呼叫的方法。它是在 Ajax 按鈕的 fnClick 函式中定義的。
預設值
輸入參數 根據 $.ajax()
回傳參數 void
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "fnAjaxComplete": function ( XMLHttpRequest, textStatus ) { alert( 'Ajax 完成' ); } } ] } } ); } );
mColumns
顯示詳細資訊 		此參數定義應使用哪些欄作為匯出的資料來源。該參數可以是值為「all」、「visible」或「hidden」的字串 - 或包含要匯出的欄索引的整數陣列。此外，從 TableTools 2.2.3 開始，它也可以是一個回傳要包含在輸出中的欄索引陣列的函式。該函式採用單一引數，即 DataTables 設定物件，可用於取得 API 實例。
預設值 全部
類型 混合（字串、整數陣列或函式）
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "sButtonText": "特殊欄位", "mColumns": [ 0, 1, 4 ] }, { "sExtends": "ajax", "sButtonText": "可見欄位", "mColumns": "visible" } ] } } ); } ); $(document).ready(function() { $('#example').DataTable( { dom: 'T<"clear">lfrtip', tableTools: { aButtons: [ { sExtends: 'copy', mColumns: function ( ctx ) { var api = new $.fn.dataTable.Api( ctx ); return api.columns( '.selected' ).indexes().toArray(); } } ] } } ); } );
sAjaxUrl
顯示詳細資訊 		Ajax 按鈕的預設「fnClick」函式使用此參數來定義應將 Ajax 請求傳送到哪裡。
預設值 /xhr.php
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "sAjaxUrl": "remote.php" } ] } } ); } );
sFieldBoundary
顯示詳細資訊 		設定 CSV 欄位的邊界字元。通常您會希望它是一個單引號，但變更它可能會很有用。
預設值 '
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "sFieldBoundary": '"' } ] } } ); } );
sFieldSeperator
顯示詳細資訊 		定義要用作 CSV 欄位欄位分隔符號的字元。通常這是逗號...
預設值 ,
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "ajax", "sFieldSeperator": "-" } ] } } ); } );

集合按鈕選項

aButtons
顯示詳細資訊 		TableTools 中的集合是一個特殊的按鈕，當啟用時，它會顯示一個「子按鈕」的下拉清單。子按鈕由 aButtons 陣列定義，並採用與最上層按鈕完全相同的參數選項。
預設值
類型 陣列
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "print", { "sExtends": "collection", "sButtonText": "儲存", "aButtons": [ "csv", "xls", "pdf" ] } ] } } ); } );

Flash 按鈕選項

bBomInc
顯示詳細資訊 		定義是否應在檔案開頭包含位元組順序標記 (BOM)。
預設值
類型 布林值
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "bBomInc": true } ] } } ); } );
bFooter
顯示詳細資訊 		是否在匯出的資料中包含頁尾。
預設值
類型 布林值
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "bFooter": false } ] } } ); } );
bHeader
顯示詳細資訊 		是否在匯出中包含表格頁首。
預設值
類型 布林值
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "bHeader": false } ] } } ); } );
bSelectedOnly
顯示詳細資訊 		當此選項設定為 true 時，從表格收集的資料將僅來自最終使用者選取的列（使用 sRowSelect 選項）- 所有其他資料將被捨棄（即不會在儲存/複製中使用）。如果沒有選取任何列，則會使用所有資料。
預設值 false
類型 布林值
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "sRowSelect": "multi", "aButtons": [ { "sExtends": "csv", "bSelectedOnly": true } ] } } ); } );
mColumns
顯示詳細資訊 		此參數定義哪些欄位應作為匯出資料的來源。此參數可以是字串，其值為 'all'、'visible'、'hidden' 或 'sortable' - 或是包含要匯出欄位索引的整數陣列。
預設值
類型 混合 (字串或整數陣列)
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sButtonText": "特殊欄位", "mColumns": [ 0, 1, 4 ] }, { "sExtends": "csv", "sButtonText": "可見欄位", "mColumns": "visible" } ] } } ); } );
sCharSet
顯示詳細資訊 		此參數定義儲存檔案將使用的字元集。它可以採用 "utf8" 或 "utf16le" 的值。通常您會想使用 "utf8"，但 "utf16le" 對於儲存要由 Excel 讀取的檔案很有用。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sCharSet": "utf16le" } ] } } ); } );
sFieldBoundary
顯示詳細資訊 		設定 CSV 欄位的邊界字元。通常您會希望它是一個單引號，但變更它可能會很有用。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sFieldBoundary": '"' } ] } } ); } );
sFieldSeperator
顯示詳細資訊 		定義要用於 CSV 欄位的欄位分隔符號的字元。通常這是一個逗號（因此稱為 CSV！）。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sFieldSeperator": "-" } ] } } ); } );
sFileName
顯示詳細資訊 		此參數定義要儲存的檔案名稱。特殊字元 "*" 將被 HTML 文件中的 "TITLE" 標籤取代（如果有的話）。否則，您可以使用此參數定義要使用的檔案名稱。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sFileName": "TableTools - *.csv" } ] } } ); } );
sNewLine
顯示詳細資訊 		定義用於表示匯出資料中換行符號的字元。特殊字串 "auto" 可用於自動偵測應使用哪個換行字元（例如，在 Windows 上是 \r\n，在其他任何系統上是 \n）。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sNewLine": "auto" } ] } } ); } );
sPdfMessage
顯示詳細資訊 		一個自由文字輸入，可用於向 PDF 匯出新增自訂描述/摘要。
預設值 空字串
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "csv", "xls", { "sExtends": "pdf", "sPdfMessage": "您的自訂訊息會在這裡顯示。" } "print" ] } } ); } );
sPdfOrientation
顯示詳細資訊 		設定 PDF 輸出的紙張方向。
預設值 直向
類型 字串（'landscape' 或 'portrait'）
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "csv", "xls", { "sExtends": "pdf", "sPdfOrientation": "landscape" } "print" ] } } ); } );
sPdfSize
顯示詳細資訊 		設定 PDF 儲存檔案中使用的紙張大小。
預設值 A4
類型 字串 - 'A[3-4]'、'letter'、'legal' 或 'tabloid'
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "csv", "xls", { "sExtends": "pdf", "sPdfSize": "letter" } "print" ] } } ); } );
sTitle
顯示詳細資訊 		設定儲存文件的標題/檔案名稱。對於 PDF 檔案，此標題會顯示在文件的頂部（在 sMessage 文字上方，如果有給定的話）。如果給定為空字串，TableTools 將使用 HTML 文件中的 TITLE 標籤。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ "copy", "csv", "xls", { "sExtends": "pdf", "sTitle": "我的標題" } "print" ] } } ); } );
sToolTip
顯示詳細資訊 		為按鈕定義 'title' 屬性，以便瀏覽器將其顯示為標準工具提示顯示的一部分（通常是一個黃色懸停方塊）。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sToolTip": "另存為 CSV" } ] } } ); } );

列印按鈕選項

bShowAll
顯示詳細資訊 		此參數可用於讓 TableTools 僅顯示目前頁面（false），或顯示表格中的所有記錄（true）。
預設值 true
類型 布林值
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "print", "bShowAll": false } ] } } ); } );
sInfo
顯示詳細資訊 		當開始列印顯示時，TableTools 會向最終使用者顯示資訊訊息，告知他們正在發生的事情以及如何退出。可以使用此參數變更此訊息。
預設值
列印檢視

請使用瀏覽器的列印功能列印此表格。完成後按 Esc 鍵。
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "print", "sInfo": "完成後請按 Esc 鍵" } ] } } ); } );
sMessage
顯示詳細資訊 		您可以使用此參數讓 TableTools 將資訊訊息放在列印顯示的頂部（例如版權訊息或標題）。
預設值
類型 字串
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "print", "sMessage": "由 DataTables 產生" } ] } } ); } );

文字按鈕選項

bFooter
顯示詳細資訊 		是否在匯出的資料中包含頁尾。
預設值 true
類型 布林值
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "bFooter": false } ] } } ); } );
bHeader
顯示詳細資訊 		是否在匯出的資料中包含頁首。
預設值 true
類型 布林值
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "text", "bHeader": false } ] } } ); } );
mColumns
顯示詳細資訊 		此參數定義哪些欄位應作為匯出資料的來源。此參數可以是字串，其值為 'all'、'visible' 或 'hidden' - 或是包含要匯出欄位索引的整數陣列。
預設值 全部
類型 混合 (字串或整數陣列)
程式碼範例 $(document).ready( function () { $('#example').dataTable( { "sDom": 'T<"clear">lfrtip', "oTableTools": { "aButtons": [ { "sExtends": "csv", "sButtonText": "特殊欄位", "mColumns": [ 0, 1, 4 ] }, { "sExtends": "csv", "sButtonText": "可見欄位", "mColumns": "visible" } ] } } ); } );
頁面導覽

DataTables

DataTables 由 SpryMedia Ltd 設計和建立。
© 2007-2024 MIT 授權. 隱私權政策. 贊助者.
SpryMedia Ltd 在蘇格蘭註冊，公司編號 SC456502。