buttons.buttons.action
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
No Event object that triggered the event
2 dt
No A DataTables API instance for the host DataTable
3 node
No jQuery instance for the button node that was clicked on
4 config
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);
}
}
]
} );