Home Wiki

Editable DataTable example - custom editors

Preamble

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.

Live example

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

Initialization code

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;

                						}
                					}
					]									
				});
	})
	

Other examples