buttons.buttons.action

Since: Buttons 1.0.0

Action to take when the button is activated.
Please note - this property requires the Buttons extension for DataTables.

Description

This function defined the action that the button will take when activated by the end user. This will normally be to perform some operation on the DataTable, but can be absolutely anything since the function can be defined by yourself.

Buttons can be activated a number of different ways:

Mouse: Click
Mobile: Tap on the button
Keyboard: tab to navigate the buttons and return to activate
API: button().trigger()

Type

function action( e, dt, node, config )

Description:

The function is executed when the button is activated, allowing some action to be triggered by the end user.

Parameters:

	Name	Type	Optional
1	`e`	`object`	No
	Event object that triggered the event
2	`dt`	`DataTables.Api`	No
	A DataTables API instance for the host DataTable
3	`node`	`jQuery`	No
	jQuery instance for the button node that was clicked on
4	`config`	`object`	No
	The button's configuration object

Returns:

No return value is required or expected. No action is taken upon any value that is returned.

Default

Value: Default action depends upon the button type. Please refer to the button type documentation

Examples

DataTables initialisation: Custom action functions:

$('#myTable').DataTable( {
	buttons: {
		buttons: [
			{
				text: 'Alert',
				action: function ( e, dt, node, config ) {
					alert( 'Activated!' );
					this.disable(); // disable button
				}
			}
		]
	}
} );

Instance initialisation: Custom action functions:

new $.fn.dataTable.Buttons( table, {
	buttons: [
		{ 
			text: 'Copy to div',
			action: function ( e, dt, node, config ) {
				// Copy an array based DataTables' data to another element
				$('#output').html( dt.data().map( function (row) {
					return row.join(' | ' );
				} ).join('<br>');
			}
		}
	]
} );

Create a custom button that uses a built in button's action method:

new $.fn.dataTable.Buttons( table, {
	buttons: [
		{ 
			text: 'Create CSV',
			action: function ( e, dt, node, config ) {
				// Do custom processing
				// ...

				// Call the default csvHtml5 action method to create the CSV file
				$.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, node, config);
			}
		}
	]
} );