edit

Since: Editor 1.5.0

A button that will edit one or more existing rows using Editor.
Please note - this property requires the Editor extension for DataTables.

Description

The edit button type is added to DataTables by Editor and provides a pre-defined button that will call the edit() method to trigger the editing of the selected rows in the DataTable.

It uses the Select extension for DataTables to determine what data is selected in the DataTable, and provide that information to the edit() method to edit that data.

All of the options available for the edit() 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, in addition to those options which are available for all buttons (e.g. buttons.buttons.text):

`editor`

Type: DataTables.Editor
Default: Unset

The Editor instance that this button should operate on when activated.

`formButtons`

Type: string|object|array
Default: Unset

The form control buttons to show in the Editor form when activated by the edit button (i.e. submit, cancel, etc).

The value given here is passed directly to the buttons() method - please refer to the documentation for that method and also the button-options data type.

`formMessage`

Type: string|function
Default: Unset

The message to show in the edit 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 message() method. Please refer to the documentation for that method for full details of the options available.

`formOptions`

Type: object
Default: Unset

Form options to configure the behaviour of the form - see form-options for full details. The options specified here will take precedence over any configured by formOptions.main.

`formTitle`

Type: string|function
Default: Unset

The title to give the edit 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 title() method. Please refer to the documentation for that method for full details of the options available.

Examples

A single, simple edit button for the Editor instance myEditor:

new DataTable('#myTable', {
	buttons: [
		{
			extend: 'edit',
			editor: myEditor
		}
	]
});

Create, edit and remove buttons, all with default options:

new DataTable('#myTable', {
	buttons: [
		{ extend: 'create', editor: myEditor },
		{ extend: 'edit', editor: myEditor },
		{ extend: 'remove', editor: myEditor }
	]
});

An edit button with a cancel button:

new DataTable('#myTable', {
	buttons: [
		{
			extend: 'edit',
			editor: myEditor,
			formButtons: [
				{
					label: 'Cancel',
					fn: function () {
						this.close();
					}
				},
				'Save row'
			]
		}
	]
});

A edit button with a custom title using a function:

new DataTable('#myTable', {
	buttons: [
		{
			extend: 'edit',
			editor: myEditor,
			formTitle: function (editor, dt) {
				// Get the data for the row and use a property from it in the
				// form title
				var rowData = dt.row({ selected: true }).data();

				return 'Editing data for ' + rowData.first_name;
			}
		}
	]
});