button-options

Editor button configuration options.
Please note - this property requires the Editor extension for DataTables.

The full Editor reference documentation is available to registered users of Editor - the information shown below is a summary only. If you already have an Editor license please sign-in, alternatively an Editor license can be purchased on this site, or sign up for the free trial.

Description

The Editor buttons() method provides the ability to define the buttons that are shown in an Editor form. How those buttons are each individually configured is defined by this button-options data type.

Options

Each button configuration can be defined and configured in two different ways:

• string - A simple string which will be used as the label for the button and the activation function will trigger a call to submit().
• object - An object with options to provide complete control over the button and what it does upon activation.

Note that the buttons() method can also take an array of items to be configured as buttons. The elements of that array are button-options data types, as defined here.

string

As a string the value given is used a the button label (i.e. the text that the end user sees inside the button), and the activation function is set to call submit() automatically (it is the most commonly used function for a button!).

Simple Save button

editor.buttons( 'Save' );

This is shorthand for using object notation (described below):

editor.buttons( {
    text: 'Save',
    action: function () {
        this.submit();
    }
} );

object

As an object, four properties can be defined for the button:

• text - The text inside the button that the end user will see. This can include HTML information if you want to insert additional markup to the button for styling purposes. This is either a string or function (as of Editor 1.5). If a function is provided, it is executed when the button is created with the return value being used as the button label. It is passed two parameters:
  1. DataTables.Editor: The Editor instance
  2. DataTables.Api: The DataTables API instance for the table being edited. In standalone mode this is an empty API instance.
• action - The callback function that is called when the button is activated. The function is passed no parameters and no return value is expected. It is executed in the scope of the Editor instance, so API methods can be called using this.
• className - A class name to be added to the button (in addition to the default classes Editor also adds). This can be useful to add styling information to one or more buttons - for example you might wish to visually emphasise a Save button over a Close button.
• tabIndex - Set the tab index of the buttons for control of keyboard access order. Defaults to 0.

Legacy

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. The legacy names can still be used in Editor 1.x and Editor will automatically determine which naming convention has been provided. As such 1.7 is full backwards compatible with the older style of naming.

Simple Save button

editor.buttons( {
    text: 'Save',
    action: function () {
        this.submit();
    }
} );

Save (with a class name added) and Close buttons

editor.buttons( [
    {
        text: 'Save',
        className: 'primary',
        action: function () {
            this.submit();
        }
    },
    {
        text: 'Close',
        action: function () {
            this.close();
        }
    }
] );

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