Editable plugin enables you to add "actions" in the table. Action can be Editing columns in the popup.
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 |
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 ] }); });
One action form that will be loaded from the form and update row cells should be defined. This form should have the following properties:
<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>
Each table row should have a link with id table-action-(ACTION NAME) that will start the action.