buttons.buttons.action

Since: Buttons 3.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, callback )

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
5	`callback`	`function`	No
	Since 3.0: Callback function that should be executed when the action function has finished processing. This is to allow the button to resume its normal state when the `buttons.buttons.async` property is set for a button. If it is not set, this function will give be executable, it just won't do anything.

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

Custom action functions:

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

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

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					text: 'Create CSV',
					action: function (e, dt, node, config, cb) {
						// Do custom processing
						// ...

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

Async processing finished callback:

new DataTable('#myTable', {
	layout: {
		topEnd: {
			buttons: [
				{
					text: 'Make Ajax call',
					async: 100,
					action: function (e, dt, node, config, cb) {
						// Do custom async processing - e.g. an Ajax call
						new Promise(resolve => {
							// ...

							resolve();
							cb();
						});
					}
				}
			]
		}
	}
});