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.
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 |
In the table should be placed links or butons with class names in the format table-action-
<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>
In the plugin initialization code should be placed definitions of the action.
$('#example').dataTable() .makeEditable({ aoTableActions: [ { sAction: "EditBrowser" }, { sAction: "EditPlatforms" } ] });