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:
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 |
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:
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:
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.