Home Wiki

Editable DataTable example - Editing data in the popup window(Beta)

Preamble

Editable plugin enables you to add "actions" in the table. Action can be Editing columns in the popup.

Live example








First
Second
Third The Worst









First
Second
Third


Browser Platform(s) Engine version CSS grade Status Edit Details
Internet Explorer 4.0 Win 95+ 4 X Retired Edit Details
Internet Explorer 5.0 Win 95+ 5,5.5 C Retired Edit Details
Internet Explorer 5.5 Win 95+ 5.5 A Retired Edit Details
Internet Explorer 6 Win 98+ 6 A Live Edit Details
Internet Explorer 7 Win XP SP2+ 7 A Live Edit Details
AOL browser (AOL desktop) Win XP 6 A Retired Edit Details

Initialization code

To initialize action, the action definition in the aoTableActions array. Action definition should contain name of the action, URL of the server-side page that will be called, and dialog options that will be passed to the action popup dialog.

$(document).ready(function () {
	$('#example').dataTable()
			.makeEditable({
						aoTableActions: [
							{
								sAction: "EditData",
								sServerActionURL: "UpdateData.php",
								oFormOptions: { autoOpen: false, modal:true }
							}
						],
						sUpdateURL: "UpdateData.php",
						sAddURL: "AddData.php",
						sDeleteURL: "DeleteData.php",
						aoColumns: [ { } ,  { } , { } , { } , null ]									
					});
	
});		
			

Action form

One action form that will be loaded from the form and update row cells should be defined. This form should have the following properties:

Example is shown below:

<form id="formEditData" action="UpdateData.php" title="Update Platforms">
        <label for="browser">Browser</label><br />
		<input type="text" name="browser" id="browser" class="required" rel="0" />
        <br />
        <label for="platforms">Platform(s)</label><br />
		<textarea name="platforms" id="Textarea1" class="required" rel="1"></textarea>
		<br />
        <label for="version">Engine version</label><br />
		<select name="version" id="version" rel="2">
                <option>1.5</option>
                <option>1.7</option>
                <option>1.8</option>
				<option>1.5</option>
                <option>4</option>
                <option>5</option>
				<option>5.5</option>
                <option>6</option>
                <option>7</option>
        </select>
        <br />
        <label for="grade">CSS grade</label><br />
		<input type="radio" name="grade" value="A" rel="3"> First<br>
		<input type="radio" name="grade" value="B" rel="3"> Second<br>
		<input type="radio" name="grade" value="C" rel="3"> Third
		<input type="radio" name="grade" value="X" rel="3"> The Worst
        <br />
        <button id="formEditDataOk" type="submit">Ok</button>
		<button id="formEditDataCancel" type="button">Cancel</button>
</form>		
			
			

Starting actions

Each table row should have a link with id table-action-(ACTION NAME) that will start the action.

Other examples