初始化
此擴充套件現已停用,並已被 Buttons 和 Select 擴充套件取代。此文件僅保留供舊版參考。新的專案應優先使用 Buttons 和 Select,而不是 TableTools。
TableTools 的初始化通常與 DataTables 的初始化同時進行,透過 dom
和 tableTools
屬性。TableTools 的自訂是透過 tableTools
物件的屬性完成的 - 下面提供可用的選項完整清單。也可以直接初始化 TableTools,當您想要輕鬆參考實例,或將工具列放置在 DataTables DOM 結構之外時,這會很有用。
DataTables 屬性
tableTools 顯示詳細資訊
|
若要透過 DataTables 初始化物件自訂 TableTools 選項,您可以使用此參數。以下「初始化參數」部分提供的任何選項都可以在這裡使用。 |
預設值 |
{} |
類型 |
物件 |
程式碼範例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sSwfPath": "/swf/copy_csv_xls_pdf.swf" } } ); } );
|
dom 顯示詳細資訊
|
DataTables 中的 dom 參數用於定位 DataTables 新增到表格的各種控制項(篩選、分頁等)在 DOM 中的位置。當與您的 CSS 結合使用時,這將直接影響顯示中元素的位置。您可以將字元 'T' 插入 dom 中來包含 TableTools。這就是初始化 TableTools 所需的一切 - 一切都是選項和自訂。 |
預設值 |
lfrtip |
類型 |
字串 |
程式碼範例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip' } ); } );
|
選項
aButtons 顯示詳細資訊
|
此參數定義 TableTools 將使用的按鈕,並提供 TableTools 自訂的主要重點。在其基本形式中,此陣列的元素是符合預定義按鈕的字串,但這些元素也可以是定義您自己的按鈕或覆寫預設動作的物件。這在 按鈕 頁面上有完整說明。 |
預設值 |
[ "copy", "csv", "xls", "pdf", "print" ] |
類型 |
陣列 |
程式碼範例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "aButtons": [ "copy", "print" ] } } ); } );
|
fnPreRowSelect 顯示詳細資訊
|
這是一個回呼函式,會在選取列之前觸發(即,滑鼠按下已發生,但 TableTools 尚未選取列)。如果需要,可以用來取消選取。 |
預設值 |
|
輸入參數 |
- event : 選取此列時發生的點擊事件
- array - node : 要選取的 TR 元素
|
傳回參數 |
布林值 - 如果可以選取列則為 true,如果不能選取則為 false。 |
程式碼範例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "fnPreRowSelect": function ( e, nodes ) { if ( e.currentTarget.className.indexOf('no_select') != -1 ) { return false; } return true; } } } ); } );
|
fnRowDeselected 顯示詳細資訊
|
當列取消選取時呼叫的回呼函式(即,與 fnRowSelected 相反)。 |
預設值 |
|
輸入參數 |
- array - node : 已取消選取的 TR 元素
|
傳回參數 |
void |
程式碼範例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "fnRowDeselected": function ( nodes ) { alert( 'ID 為 '+nodes[0].id+' 的列已取消選取' ); } } } ); } );
|
fnRowSelected 顯示詳細資訊
|
當選取列時發生的回呼函式。這允許在選取任何列時發生特定動作(例如,選取列計數器)。 |
預設值 |
|
輸入參數 |
- array - node : 已選取的 TR 元素
|
傳回參數 |
void |
程式碼範例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "fnRowSelected": function ( nodes ) { alert( 'ID 為 '+nodes[0].id+' 的列已選取' ); } } } ); } );
|
sRowSelect 顯示詳細資訊
|
TableTools 提供允許終端使用者選取表格中的列所需的一切(透過點擊它們)。預設為停用,但可以透過將此屬性設定為 "single"(一次只允許選取表格中的一列)或 "multi"(允許選取任意數量的列)輕鬆啟用。 |
預設值 |
none |
類型 |
字串 |
程式碼範例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sRowSelect": "single" } } ); } );
|
sRowSelector 顯示詳細資訊
|
預設情況下,當列選取處於活動狀態時,TableTools 會在點擊表格中的任何元素時選取列。將此選取限制為特定欄,甚至列中的特定元素可能會很有用,這可以透過此選項完成。這是一個簡單的 jQuery 選取器字串,用於選取將執行選取的元素。 |
預設值 |
tr |
類型 |
字串 |
程式碼範例 |
$(document).ready( function () { // 在點擊時選取列或選取除了第一欄以外的所有欄 $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sRowSelector": "td:not(:first-child)" } } ); } );
|
sSelectedClass 顯示詳細資訊
|
設定用於指示終端使用者已選取列的類別。 |
預設值 |
DTTT_selected |
類型 |
字串 |
程式碼範例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sRowSelect": "multi", "sSelectedClass": "row_selected" } } ); } );
|
sSwfPath 顯示詳細資訊
|
定義 TableTools 用於複製到剪貼簿和在本機儲存檔案操作的 SWF 路徑。如果您在這些操作中遇到問題,但列印沒有問題,這很可能是問題所在。 |
預設值 |
media/swf/copy_csv_xls_pdf.swf |
類型 |
字串 |
程式碼範例 |
$(document).ready( function () { $('#example').dataTable( { "dom": 'T<"clear">lfrtip', "tableTools": { "sSwfPath": "/swf/copy_csv_xls_pdf.swf" } } ); } );
|
直接初始化
TableTools 可以透過 $.fn.dataTable.TableTools
類別直接初始化,也可以透過 DataTables dom
選項初始化。TableTools 建構函式必須使用關鍵字 new
來呼叫,以建立新的實例,並採用兩個參數
1. DataTables 物件 - 要將 TableTools 連接到的 DataTables 實例(即,它將從哪裡取得資料來源)。2. TableTools 初始化選項 - 具有上面清單中的選項的物件。
下面的範例顯示如何以這種方式初始化 TableTools。請注意,您需要使用 fnContainer()
API 方法並將傳回的節點插入您想要它出現在文件中的位置,手動將 TableTools 建立的容器元素插入 DOM 中。下面的範例顯示此元素插入到 #demo
元素之前。
$(document).ready( function () {
var table = $('#example').dataTable();
var tableTools = new $.fn.dataTable.TableTools( table, {
"buttons": [
"copy",
"csv",
"xls",
"pdf",
{ "type": "print", "buttonText": "Print me!" }
]
} );
$( tableTools.fnContainer() ).insertAfter('div.info');
} );