DataTables logo
≡

buttons()

Since: Editor 1.0

Define the control buttons to be shown in the form.
Please note - this property requires the Editor extension for DataTables.

Description

Editor can display buttons in each of its editing modes (edit(), bubble() and inline()) which, typically, provides the end user with a method of saving the form, or optionally closing it. However, the buttons shown are exceptionally configurable and can be configured to perform almost any action as they will run a defined function when activated.

In its simplest form, a button definition is simple a string, which is used as the label for the button and the action is automatically set to submit the form (as this is the most common action for a button in an Editor form!). More complex buttons with custom behaviour, class names, etc can be defined using as described by the button-options documentation.

Whether buttons are shown in the form or not is controlled by the buttons option in the form-options configuration object used to show the form.

Note that calling this method will replace any buttons which are currently shown in the form.

Type

buttons( btns )

Set-up the buttons that will be shown in form to control the form.

Parameters:

NameTypeOptional
1btns

button-options, array

No

Button definition object, or objects if given as an array. This can take two forms:

  • A string - If a button is given as a string, this string will be used as the display label for the button and when activated it will automatically submit the form (through a call to submit() .
  • An object - As an object, which accepts four properties:
    • text - the button name shown to the end user
    • action - a function (executed in the Editor instance scope so you can use Editor API methods in it as this) that is called when the button is activated by the end user (for example submit the form, close etc).
    • className - string that is added to the button element.
    • tabIndex (since 1.6) - set the tab index attribute value. Default 0 if not specified.

Please note that action and text were introduced in Editor 1.7 to match the object structure used by the Buttons extension for DataTables. Prior to 1.7, these properties were called fn and label respectively. This change is fully backwards compatible - Editor will automatically determine which convention was used.

For a more detailed and complete explanation, please see the button-options documentation.

Returns:

DataTable.Editor: Editor instance

Examples

Create a button using a string as a label:

editor
	.title('Create new row')
	.buttons('Save')
	.create();

Create a button using an object to define the button. This results in exactly the same behaviour as the above example, but is explicit in its behaviour.:

editor
	.title('Create new row')
	.buttons({
		text: 'Save',
		action: function () {
			this.submit();
		}
	})
	.create();

Show Save and Cancel buttons:

editor
	.title('Create new row')
	.buttons([
		'Save',
		{
			text: 'Cancel',
			action: function () {
				this.close();
			}
		}
	])
	.create();

Use show() and hide() to have simple and complete displays for the form fields:

editor
	.title('Create new row')
	.buttons([
		'Save',
		{
			text: 'Simple',
			action: function () {
				this.hide(['position', 'salary', 'additional_comments']);
			}
		},
		{
			text: 'Simple',
			action: function () {
				// Show all field
				this.show();
			}
		}
	])
	.create();

Use a function to count the number of rows operating on:

editor.buttons([
	{
		text: function (editor, dt) {
			return 'Delete ' + dt.rows({ selected: true }).count() + ' rows';
		},
		action: function () {
			this.submit();
		}
	}
]);

Bootstrap save button with a class:

new DataTable('#myTable', {
	buttons: [
		{
			extend: 'create',
			editor: myEditor,
			formButtons: {
				text: 'Save',
				action: function () {
					this.submit();
				},
				className: 'btn btn-default'
			}
		}
	]
});