simple-datatables

simple-datatables fires its own events which you can listen for by utilising the .on() method:

let dataTable = new DataTable(myTable);

dataTable.on('datatable.XXXX', function(args) {
	// Do something when datatable.XXXX fires
});

datatable.init

Fires when the table is fully rendered and ready for use.

datatable.page

Fires on page change.

A single argument is available which returns the page number:

dataTable.on('datatable.page', function(page) {
    //
});

datatable.page:before

Fires before page change.

A single argument is available which returns the page number:

dataTable.on('datatable.page:before', function(page) {
    //
});

datatable.perpage

Fires when the perPage option is changed with the dropdown. A single argument returns the per-page value:

dataTable.on('datatable.perpage', function(perpage) {
    //
});

datatable.perpage:before

Fires before the perPage option is changed with the dropdown. A single argument returns the per-page value:

dataTable.on('datatable.perpage:before', function(perpage) {
    //
});

datatable.refresh

Fires when the .refresh() method is called.

datatable.refresh:before

Fires before the .refresh() method is called.

datatable.search

Fires on keyup during a search.

Two arguments are available: query which returns the query string entered and matched which returns an array of rows containing the matched string:

dataTable.on('datatable.search', function(query, matched) {
    //
});

datatable.search:before

Fires on keyup before a search.

Two arguments are available: query which returns the query string entered and matched which returns an array of rows containing the matched string:

dataTable.on('datatable.search:before', function(query, matched) {
    //
});

datatable.selectrow

Fires when user selects a row - either by mouse click on a row or using Space/Enter during keyboard based navigation (requires option [[rowNavigation]]).

Two arguments are available: row which returns the <tr> element that was selected and event which returns the event that caused the selection. You can run event.preventDefault() like this:

dataTable.on("datatable.selectrow", (rowIndex, event) => {
    event.preventDefault();
    ...
});

See the row navigation demo for a more complete example.

datatable.sort

Fires when the table is sorted.

Two arguments are available when listening for this event: column which returns the column index and direction which returns the sort direction:

dataTable.on('datatable.sort', function(column, direction) {
    //
});

datatable.update

Fires when the .update() method is called.

datatable.update:before

Fires before the .update() method is called.

editable.init

Fires when the editor is initialized.

editable.save.cell

Fires when the cell is saved (even when the value is not actually updated).

editable.save.row

Fires when the row is saved.

editable.context.open

Fires when the context menu is opened.

editable.context.close

Fires when the context menu is closed.

This site is open source. Improve this page.