Events

DataTables and its extensions will emit custom DOM events when they perform particular operations, providing the ability to listen for these events and take action on them when they occur, for example updating display information about a table when a table is redrawn.

The events DataTables emits can all be listened for using the on() method, or the jQuery.on() method with the dt namespace (all events are triggered with the dt namespace to ensure they do not conflict with custom events from other libraries!). The example below shows how the draw event can be listened for:

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

For further general information about DataTables' custom events, please refer to the events manual.

Library Name Summary
DataTables

childRow

A child row has been added or removed from the table

DataTables

column-sizing

Column sizing event - fired when the column widths are recalculated.

DataTables

column-visibility

Column visibility event - fired when the visibility of a column changes.

DataTables

destroy

Table destroy event - fired when a table is destroyed.

DataTables

draw

Draw event - fired once the table has completed a draw.

DataTables

dt-error

Error event - An error has occurred during DataTables' processing of data.

DataTables

info

Table info display is updated.

DataTables

init

Initialisation complete event - fired when DataTables has been fully initialised and data loaded.

DataTables

length

Page length change event - fired when the page length is changed.

DataTables

options

Initialisation of a DataTable - options passed.

DataTables

order

order event - fired when the data contained in the table is ordered.

DataTables

page

Page change event - fired when the table's paging is updated.

DataTables

preDraw

Pre-draw event - triggered as the table is about to be redrawn.

DataTables

preInit

Initialisation started event - triggered immediately before data load.

DataTables

preXhr

Ajax event - fired before an Ajax request is made

DataTables

processing

Processing event - fired when DataTables is processing data

DataTables

requestChild

DataTables wants to display a child row

DataTables

search

Search event - fired when the table is filtered.

DataTables

stateLoadParams

State load event - fired when loading state from storage.

DataTables

stateLoaded

State loaded event - fired once state has been loaded and applied.

DataTables

stateSaveParams

State save event - fired when saving table state information.

DataTables

xhr

Ajax event - fired when an Ajax request is completed

AutoFill

autoFill

An auto fill action has been completed

AutoFill

preAutoFill

An auto fill action is about to be applied to the table

Buttons

buttons-action

A button's action method has been triggered

Buttons

buttons-processing

A button's processing state has changed

ColReorder

column-reorder

Columns have been reordered by the end user or API

ColReorder

columns-reordered

Column reordering is finished and table updated

KeyTable

key

A key event has been detected on the table and is not handled by KeyTable

KeyTable

key-blur

KeyTable has blurred focus from a cell

KeyTable

key-focus

KeyTable has focused a cell

KeyTable

key-prefocus

KeyTable

key-refocus

KeyTable has refocused a cell

KeyTable

key-return-submit

Return key was used to submit an Editor inline edit

Responsive

responsive-display

The details for a row have been displayed, updated or hidden

Responsive

responsive-resize

The columns displayed by Responsive has changed due to a resize

RowGroup

rowgroup-datasrc

Grouping data property has been changed

RowReorder

pre-row-reorder

A row reordered action has been initiated by the end user.

RowReorder

row-reorder

Rows have been reordered by the end user

RowReorder

row-reorder-canceled

Reordering canceled by the end user

RowReorder

row-reorder-changed

Row moved into new position by the end user

RowReorder

row-reordered

After rows have been reordered by the end user

SearchBuilder

dtsb-inserted

An element from the init function has been inserted into the dom

Select

deselect

Items (rows, columns or cells) have been deselected

Select

select

Items (rows, columns or cells) have been selected

Select

select-blur

Prior to blurring item selection in the DataTable (cancellable)

Select

selectItems

Select items type change event.

Select

selectStyle

Select style change event.

Select

user-select

A user action will cause items to be selected in the table

StateRestore

stateRestore-change

Triggered when a state within StateRestore has been added, removed or changed