DataTable Editable plugin supports inline editing of varous input types (text box, textarea, select list etc). Editing is implemented using JQuery JEditable plugin. To initialize the editors that will be applied on the columns, parameter aoColumns needs to be set in the plugin initialization call. This is an array of settings that will be applied on table columns. This array should have the same number of columns as an original table. Editor properties that are set in this array are identical to the properties of JQuery JEditable plugin. DataTables Editable plugin delegates cell editing functionalities to the JEditable plugin and just passes properties in the aoColumns to the editors for the praticular columns.
In this example, first column is read only (passed null as aoColumns parameter), and the second one uses standard settings. The third column uses text area, and has callback function fnOnCellUpdated that will be called when update is finished. The fourth column uses select list with php page as a source for the list of items and OK button for submiting values, and has own update server-side page. The fifth column uses select list with locally defined items that will be added in the list, and uses callback function to post results.
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
Trident | Internet Explorer 4.0 | Win 95+ (Entity: &) | 4 | X |
Trident | Internet Explorer 5.0 | Win 95+ | 5 | C |
Trident | Internet Explorer 5.5 | Win 95+ | 5.5 | A |
Trident | Internet Explorer 6 | Win 98+ | 6 | A |
Trident | Internet Explorer 7 | Win XP SP2+ | 7 | A |
Trident | AOL browser (AOL desktop) | Win XP | 6 | A |
Gecko (UTF-8: $¢€) | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
Gecko | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | 1.7 | A |
Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A |
Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Mozilla 1.0 | Win 95+ / OSX.1+ | 1 | A |
Gecko | Mozilla 1.1 | Win 95+ / OSX.1+ | 1.1 | A |
Gecko | Mozilla 1.2 | Win 95+ / OSX.1+ | 1.2 | A |
Gecko | Mozilla 1.3 | Win 95+ / OSX.1+ | 1.3 | A |
Gecko | Mozilla 1.4 | Win 95+ / OSX.1+ | 1.4 | A |
Gecko | Mozilla 1.5 | Win 95+ / OSX.1+ | 1.5 | A |
Gecko | Mozilla 1.6 | Win 95+ / OSX.1+ | 1.6 | A |
Gecko | Mozilla 1.7 | Win 98+ / OSX.1+ | 1.7 | A |
Gecko | Mozilla 1.8 | Win 98+ / OSX.1+ | 1.8 | A |
Gecko | Seamonkey 1.1 | Win 98+ / OSX.2+ | 1.8 | A |
Gecko | Epiphany 2.20 | Gnome | 1.8 | A |
Webkit | Safari 1.2 | OSX.3 | 125.5 | A |
Webkit | Safari 1.3 | OSX.3 | 312.8 | A |
Webkit | Safari 2.0 | OSX.4+ | 419.3 | A |
Webkit | Safari 3.0 | OSX.4+ | 522.1 | A |
Webkit | OmniWeb 5.5 | OSX.4+ | 420 | A |
Webkit | iPod Touch / iPhone | iPod | 420.1 | A |
Webkit | S60 | S60 | 413 | A |
Presto | Opera 7.0 | Win 95+ / OSX.1+ | - | A |
Presto | Opera 7.5 | Win 95+ / OSX.2+ | - | A |
Presto | Opera 8.0 | Win 95+ / OSX.2+ | - | A |
Presto | Opera 8.5 | Win 95+ / OSX.2+ | - | A |
Presto | Opera 9.0 | Win 95+ / OSX.3+ | - | A |
Presto | Opera 9.2 | Win 88+ / OSX.3+ | - | A |
Presto | Opera 9.5 | Win 88+ / OSX.3+ | - | A |
Presto | Opera for Wii | Wii | - | A |
Presto | Nokia N800 | N800 | - | A |
Presto | Nintendo DS browser | Nintendo DS | 8.5 | C/A1 |
KHTML | Konqureror 3.1 | KDE 3.1 | 3.1 | C |
KHTML | Konqureror 3.3 | KDE 3.3 | 3.3 | A |
KHTML | Konqureror 3.5 | KDE 3.5 | 3.5 | A |
Tasman | Internet Explorer 4.5 | Mac OS 8-9 | - | X |
Tasman | Internet Explorer 5.1 | Mac OS 7.6-9 | 1 | C |
Tasman | Internet Explorer 5.2 | Mac OS 8-X | 1 | C |
Misc | NetFront 3.1 | Embedded devices | - | C |
Misc | NetFront 3.4 | Embedded devices | - | A |
Misc | Dillo 0.8 | Embedded devices | - | X |
Misc | Links | Text only | - | X |
Misc | Lynx | Text only | - | X |
Misc | IE Mobile | Windows Mobile 6 | - | C |
Misc | PSP browser | PSP | - | C |
Other browsers | All others | - | - | U |
In the initialization code you will need to pass definitions of the columns according to the JQuery JEditable plugin rules.
$(document).ready( function () { $('#example').dataTable().makeEditable({ sUpdateURL: "UpdateData.php", "aoColumns": [ null, { }, { indicator: 'Saving platforms...', tooltip: 'Click to edit platforms', type: 'textarea', submit:'Save changes', fnOnCellUpdated: function(sStatus, sValue, settings){ alert("(Cell Callback): Cell is updated with value " + sValue); } }, { //indicator: 'Saving Engine Version...', tooltip: 'Click to select engine version', loadtext: 'loading...', type: 'select', onblur: 'cancel', submit: 'Ok', loadurl: 'EngineVersionList.php', loadtype: 'GET', sUpdateURL: "CustomUpdateEngineVersion.php" }, { indicator: 'Saving CSS Grade...', tooltip: 'Click to select CSS Grade', loadtext: 'loading...', type: 'select', onblur: 'submit', data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}", sUpdateURL: function(value, settings){ alert("Custom function for posting results"); return value; } } ] }); })