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 Buttons's ability to easily create customised button actions to show a button
that will use the Editor form (without displaying it to the end user) to add 250 to the salary value for the selected row. This is done by specifying a custom
button action function using buttons.buttons.action - that function will edit the currently selected row, alter the salary value and submit it to the
server.
It is worth noting that Buttons is used in this example for simplicity, but you could use any control on your page that you wish!
The Javascript shown below is used to initialise the table shown in this example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | var editor; // use a global for the submit and return data rendering in the examples$(document).ready(function() { editor = new $.fn.dataTable.Editor( { ajax: "../../controllers/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", type: "datetime" }, { label: "Salary:", name: "salary" } ] } ); var table = $('#example').DataTable( { dom: "Bfrtip", ajax: "../../controllers/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, '$' ) } ], select: true, buttons: [ { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "selectedSingle", text: "Salary +250", action: function ( e, dt, node, config ) { // Immediately add `250` to the value of the salary and submit editor .edit( table.row( { selected: true } ).index(), false ) .set( 'salary', (editor.get( 'salary' )*1) + 250 ) .submit(); } }, { extend: "remove", editor: editor } ] } );} ); |
In addition to the above code, the following Javascript library files are loaded for use in this example:
Editor submits and retrieves information by Ajax requests. The two blocks below show the data that Editor submits and receives, to and from the server. This is updated live as you interact with Editor so you can see what is submitted.
The following shows the data that has been submitted to the server when a request is made to add, edit or delete data from the table.
// No data yet submittedThe following shows the data that has been returned by the server in response to the data submitted on the left and is then acted upon.
// No data yet received