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:
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);
			}
		}
	]
} );