事件

DataTables 及其擴充套件會在執行特定操作時發出自訂 DOM 事件,提供監聽這些事件並在事件發生時採取動作的能力,例如在重新繪製表格時更新表格的顯示資訊。

可以使用 on() 方法,或使用帶有 dt 命名空間的 jQuery.on() 方法來監聽 DataTables 發出的所有事件(所有事件都使用 dt 命名空間觸發,以確保它們不會與其他函式庫的自訂事件衝突!)。下面的範例顯示如何監聽 draw 事件

$('#myTable').on( 'draw.dt', function () {
    alert( 'Table redrawn' );
} );

有關 DataTables 自訂事件的更多一般資訊,請參閱事件手冊

函式庫 名稱 摘要
DataTables

childRow

已在表格中新增或移除子列

DataTables

column-sizing

欄位大小調整事件 - 當重新計算欄位寬度時觸發。

DataTables

column-visibility

欄位可見性事件 - 當欄位的可見性變更時觸發。

DataTables

destroy

表格銷毀事件 - 當表格被銷毀時觸發。

DataTables

draw

繪製事件 - 當表格完成繪製時觸發。

DataTables

dt-error

錯誤事件 - 在 DataTables 處理資料期間發生錯誤。

DataTables

info

表格資訊顯示已更新。

DataTables

init

初始化完成事件 - 當 DataTables 完全初始化並載入資料時觸發。

DataTables

length

頁面長度變更事件 - 當頁面長度變更時觸發。

DataTables

options

DataTable 的初始化 - 傳遞的選項。

DataTables

order

排序事件 - 當表格中包含的資料被排序時觸發。

DataTables

page

頁面變更事件 - 當表格的分頁更新時觸發。

DataTables

preDraw

預繪製事件 - 在表格即將重新繪製時觸發。

DataTables

preInit

初始化啟動事件 - 在載入資料之前立即觸發。

DataTables

preXhr

Ajax 事件 - 在發出 Ajax 請求之前觸發

DataTables

processing

處理事件 - 當 DataTables 正在處理資料時觸發

DataTables

requestChild

DataTables 想要顯示子列

DataTables

search

搜尋事件 - 當表格被篩選時觸發。

DataTables

stateLoadParams

狀態載入事件 - 從儲存空間載入狀態時觸發。

DataTables

stateLoaded

狀態載入完成事件 - 當狀態載入並應用後觸發。

DataTables

stateSaveParams

狀態儲存事件 - 當儲存表格狀態資訊時觸發。

DataTables

xhr

Ajax 事件 - 當 Ajax 請求完成時觸發

AutoFill

autoFill

自動填滿動作已完成

AutoFill

preAutoFill

自動填滿動作即將應用於表格

按鈕

buttons-action

按鈕的動作方法已被觸發

按鈕

buttons-processing

按鈕的處理狀態已變更

ColReorder

column-reorder

欄位已由最終使用者或 API 重新排序

ColReorder

columns-reordered

欄位重新排序已完成且表格已更新

KeyTable

key

在表格上偵測到按鍵事件,且 KeyTable 處理

KeyTable

key-blur

KeyTable 已模糊化儲存格的焦點

KeyTable

key-focus

KeyTable 已聚焦儲存格

KeyTable

key-prefocus

KeyTable

key-refocus

KeyTable 已重新聚焦儲存格

KeyTable

key-return-submit

Return 鍵用於提交 Editor 行內編輯

Responsive

responsive-display

已顯示、更新或隱藏列的詳細資料

Responsive

responsive-resize

Responsive 顯示的欄位由於調整大小而變更

RowGroup

rowgroup-datasrc

分組資料屬性已變更

RowReorder

pre-row-reorder

最終使用者已啟動列重新排序動作。

RowReorder

row-reorder

最終使用者已重新排序列

RowReorder

row-reorder-canceled

最終使用者已取消重新排序

RowReorder

row-reorder-changed

最終使用者已將列移至新位置

RowReorder

row-reordered

在最終使用者重新排序列之後

SearchBuilder

dtsb-inserted

已將初始化函式中的元素插入 DOM 中

Select

deselect

已取消選取項目(列、欄位或儲存格)

Select

select

已選取項目(列、欄位或儲存格)

Select

select-blur

在模糊化 DataTable 中的項目選取之前(可取消)

Select

selectItems

選取項目類型變更事件。

Select

selectStyle

選取樣式變更事件。

Select

user-select

使用者動作將導致表格中選取項目

StateRestore

stateRestore-change

當 StateRestore 內的狀態被新增、移除或變更時觸發