Home Wiki

Editable DataTable example - Using Table Actions

Preamble

You can associate custom actions buttons on the particular table rows. Action buttons can be used to edit entire or partial row elements in the popup edit form.

Live example
















First
Second
Third
Add 1
Browser Platform(s) Engine version CSS grade Edit
Browser Platform(s) Engine version CSS grade Edit
Internet Explorer 4.0 Win 95+ 4 X Edit Browser
Internet Explorer 5.0 Win 95+ 5 C Edit Browser
Internet Explorer 5.5 Win 95+ 5.5 A Edit Browser
Internet Explorer 6 Win 98+ 6 A Edit Browser
Internet Explorer 7 Win XP SP2+ 7 A Edit Browser
AOL browser (AOL desktop) Win XP 6 A Edit Browser

Additional HTML code

In the table should be placed links or butons with class names in the format table-action-. Plugin will attach event handlers to these elements. Example is shown below:

        <tr id="6">
            <td>
                AOL browser (AOL desktop)
            </td>
            <td>
                Win XP
            </td>
            <td>
                6
            </td>
            <td>
                A
            </td>
            <td>
                <a class="table-action-EditBrowser">Edit Browser</a>
		<button type="button" class="table-action-EditPlatforms">Edit Platforms</button> 
            </td>
        </tr>


	

In the page should be added forms that will be used for editing records. Elements in the form should have rel attributes that matches table columns. Olso id elements with classes DATARECORDID and ROWID are placed in the form their values will be populated with id of the record and id of the row that will be edited.

 <form id="formEditPlatforms" action="UpdatePlatforms.php" title="Update Platforms">
    <input type="hidden" class="DATARECORDID" name="id" />
    <input type="hidden" class="ROWID" name="row_id" />
                <label for="platforms">Platform(s)</label><br />
	<textarea name="platforms" id="Textarea1" class="required" rel="1"></textarea>
        <br />
        	<button id="formEditPlatformsOk" type="submit">Ok</button>
	<button id="formEditPlatformsCancel" type="button">Cancel</button>
</form>
	

Initialization code

In the plugin initialization code should be placed definitions of the action.

		        $('#example').dataTable()
                 			.makeEditable({
							aoTableActions: [
										{
										    sAction: "EditBrowser"
										},
										{
										    sAction: "EditPlatforms"
										}
									]		
							});

Other examples