remove
A button that will delete one or more rows using Editor.
Please note - this property requires the Editor extension for DataTables.
Description
The remove
button type is provided by Editor to give the ability to easily remove one or more selected rows in a DataTable through a pre-defined button that will call the remove()
method to trigger data deletion.
It uses the Select extension for DataTables to determine what data is selected in the DataTable, and provide that information to the remove()
method to delete that data.
All of the options available for the remove()
method's form options are available through the button options (namely formButtons
, formMessage
and formTitle
).
This button requires that the editor
option must be set, which tells the button which Editor instance to operate on when activated. In this way multiple Editor instances could be attached to a single DataTable if required.
Options
This button can have the following options set in its configuration object to customise its actions and display:
Name | Type | Default |
---|---|---|
editor | ||
The Editor instance that this button should operate on when activated. | ||
formButtons | ||
The form control buttons to show in the Editor form when activated by the The value given here is passed directly to the | ||
formMessage | ||
The message to show in the remove form. This can either be a simple string or a function that will compute a string to show when the button is activated. The value given here is passed directly to the | ||
formTitle | ||
The title to give the remove form. This can either be a simple string or a function that will compute a string to show when the button is activated. The value given here is passed directly to the |
Examples
A single, simple remove button for the Editor instance myEditor
:
$('#myTable').DataTable( {
buttons: [
{
extend: 'remove',
editor: myEditor
}
]
} );
Create, edit and remove buttons, all with default options:
$('#myTable').DataTable( {
buttons: [
{ extend: 'create', editor: myEditor },
{ extend: 'edit', editor: myEditor },
{ extend: 'remove', editor: myEditor }
]
} );
A remove button with a cancel button:
$('#myTable').DataTable( {
buttons: [
{
extend: 'remove',
editor: myEditor,
formButtons: [
{
label: 'Cancel',
fn: function () { this.close(); }
},
'Delete data'
]
}
]
} );
Delete button with a custom message based on the selected data:
$('#myTable').DataTable( {
buttons: [
{
extend: 'edit',
editor: myEditor,
formMessage: function ( editor, dt ) {
var rows = dt.rows( { selected: true } ).data().map( function (rowData) {
return rowData.first_name;
} );
return 'Are you sure you want to delete the data for users '+rows.join(', ')+'?';
}
}
]
} );