Editable DataTable example - Adding new record

Initialisation code

$(document).ready( function () {
		$('#example').dataTable().makeEditable({
							sUpdateURL: "UpdateData.php",
							sAddURL: "AddData.php",
                    					sDeleteURL: "DeleteData.php"
							});
}
	

Additional HTML code

<!-- Place holder where add and delete buttons will be generated -->
<div class="add_delete_toolbar" />

<!-- Custom form for adding new records -->
 <form id="formAddNewRow" action="#" title="Add new record">
        <label for="engine">Rendering engine</label><br />
	<input type="text" name="engine" id="name" class="required" rel="0" />
        <br />
        <label for="browser">Browser</label><br />
	<input type="text" name="browser" id="browser" rel="1" />
        <br />
        <label for="platforms">Platform(s)</label><br />
	<textarea name="platforms" id="platforms" rel="2"></textarea>
        <br />
        <label for="version">Engine version</label><br />
	<select name="version" id="version" rel="3">
                <option>1.5</option>
                <option>1.7</option>
                <option>1.8</option>
        </select>
        <br />
        <label for="grade">CSS grade</label><br />
		<input type="radio" name="grade" value="A" rel="4"> First<br>
		<input type="radio" name="grade" value="B" rel="4"> Second<br>
		<input type="radio" name="grade" value="C" checked rel="4"> Third
        <br />
</form>
	

Other examples

• Home
• Editing cells
• Adding a new record
• Delete records
• Custom editors
• Validation of inline cells
• Pre-processing and post-processing events
• User interface customizations
• Customization of message dialogs
• Customization of buttons and form
• Two different tables on the same page
• Using Ajax source