Home Wiki

Editable DataTable example - custom editors + checkbox

Live example

Is supported Browser Platform(s) Engine version CSS grade
Rendering engine Browser Platform(s) Engine version CSS grade
No Internet Explorer 4.0 Win 95+ (Entity: &) 4 X
No Internet Explorer 5.0 Win 95+ 5 C
Yes Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Yes Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Yes Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Yes Camino 1.0 OSX.2+ 1.8 A
Yes Camino 1.5 OSX.3+ 1.8 A
Yes Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Yes Netscape Browser 8 Win 98SE+ 1.7 A

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": [
                    				{	type:'checkbox',
							onblur: 'submit',
    							checkbox: { trueValue: 'Yes', falseValue: 'No' }
                    				},
                    				{
                    				},
                    				{
                						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