# Editor example Customised control buttons

Very often, when editing a form, the system user is required to perform a repetitious task that you wish to optimise the action of. For example, this might be activating a user account in a list of users, where you simply click an Activate button.

In this example, we make use of TableTools's ability to customise button actions in its `fnClick` function to show two additional buttons for the table:

- Alter salary shows a simple form that allows only the salary to be edited for a row.
- Salary +250 doesn't show a form to the user at all, it just immediately adds a value (250 in this case) to the currency salary for the selected row and then submits it to the server without user interaction. This button in particular shows how Editor's API can be used to allow the system users to perform common actions extremely quickly.

It is worth noting that TableTools buttons are used in this example for simplicity, but you could use any control on your page that you wish!

In this example, a second Editor instance is created and the `edit()E`, `set()E`, `get()E` and `submit()E` methods used with that instance. This second instance defines only a single field, but it uses the same `staff.php` file as the full editing instance. This is possible because the Editor PHP libraries will only operate on the fields submitted, to make exactly this type of operation super easy. See the Editor PHP manual for further information.

Name | Position | Office | Extn. | Start date | Salary
--- | --- | --- | --- | --- | ---
Name | Position | Office | Extn. | Start date | Salary

- Javascript
- HTML
- CSS
- Ajax
- Server-side script

The Javascript shown below is used to initialise the table shown in this example:

`var editor; // use a global for the submit and return data rendering in the examples $(document).ready(function() { editor = new $.fn.dataTable.Editor( { ajax: "../php/staff.php", table: "#example", fields: [ { label: "First name:", name: "first_name" }, { label: "Last name:", name: "last_name" }, { label: "Position:", name: "position" }, { label: "Office:", name: "office" }, { label: "Extension:", name: "extn" }, { label: "Start date:", name: "start_date" }, { label: "Salary:", name: "salary" } ] } ); var salaryEditor = new $.fn.dataTable.Editor( { ajax: "../php/staff.php", table: "#example", fields: [ { label: "Salary:", name: "salary" } ] } ); var table = $('#example').DataTable( { dom: "Tfrtip", ajax: "../php/staff.php", columns: [ { data: null, render: function ( data, type, row ) { // Combine the first and last names into a single table field return data.first_name+' '+data.last_name; } }, { data: "position" }, { data: "office" }, { data: "extn" }, { data: "start_date" }, { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) } ], tableTools: { sRowSelect: "os", aButtons: [ { sExtends: "editor_create", editor: editor }, { sExtends: "editor_edit", editor: editor }, { sExtends: "editor_remove", editor: editor }, { sExtends: 'select_single', sButtonClass: 'marginLeft', sButtonText: 'Alter salary', fnClick: function () { if ( table.row( '.selected' ).length !== 0 ) { // Show the salary submit form salaryEditor .title( 'Edit salary' ) .buttons( { label: 'Save', fn: function() { this.submit(); } } ) .edit( table.row( '.selected' ).node() ); } } }, { sExtends: 'select_single', sButtonText: 'Salary +250', fnClick: function () { if ( table.row( '.selected' ).length !== 0 ) { // Immediately add `250` to the value of the salary and submit salaryEditor .edit( table.row( '.selected' ).node(), false ) .set( 'salary', (salaryEditor.get( 'salary' )*1) + 250 ) .submit(); } } } ] } } ); } );`

In addition to the above code, the following Javascript library files are loaded for use in this example:

- ../../../../media/js/jquery.js
- ../../../../media/js/jquery.dataTables.js
- ../../../TableTools/js/dataTables.tableTools.js
- ../../js/dataTables.editor.js

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

`a.marginLeft { margin-left: 1em; }`

The following CSS library files are loaded for use in this example to provide the styling of the table:

- ../../../../media/css/jquery.dataTables.css
- ../../../TableTools/css/dataTables.tableTools.css
- ../../css/dataTables.editor.css

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.