####Support by: Lunatech BV. http://www.lunatech.com
####by : [email protected]
####Version: v0.5
###Description JQuery data table plugin based on semantic UI.
###Dependencies
###Installation
-
Include semantic css file between
<head>tag.<link href="path/to/your/semantic.min.css" rel="stylesheet" type="text/css"> -
Include all javascript files in your page.
<script src="path/to/your/jquery-2.1.3.min.js"></script> <script src="path/to/your/semantic.min.js"></script> <script src="path/to/your/semantic.editableRecord.js"></script> -
Create a table
<table id="tableId" class="ui table"> <thead> <tr> <th name="name" data-notnull="true">Name</th> <th name="registrationDate">Registration Date</th> <th name="email">E-mail address</th> <th name="plan" data-notnull="true">Premium Plan</th> </tr> </thead> <tbody> <tr id="1"> <td>John Lilki</td> <td data-type="date">2013-09-14</td> <td data-type="email">[email protected]</td> <td data-type="checkbox" data-checked="Yes" data-unchecked="No">No</td> </tr> <tr id="2"> <td>Jamie Harington</td> <td data-type="date">2014-01-11</td> <td data-type="email">[email protected]</td> <td data-type="checkbox" data-checked="Yes" data-unchecked="No">Yes</td> </tr> <tr id="3"> <td>Jill Lewis</td> <td data-type="date">2014-11-03</td> <td data-type="email">[email protected]</td> <td data-type="checkbox" data-checked="Yes" data-unchecked="No">Yes</td> </tr> </tbody> </table> -
Initialize your table and make it editable.
$(function(){ $('#tableId').editableRecord({ idName: '<your id name>', saveUrl:'<your url to save the data>', deleteUrl: '<your url to delete the data>' }); });
| Properties and Events | Description |
|---|---|
| idName | Your id name e.g "userId" |
| saveButton | <div name="save" class="ui primary button">Save</div> |
| cancellButton | <div name="cancel" class="ui button">Cancel</div> |
| newButton | <div class="ui positive button">New</div> |
| deleteButton | <div class="ui icon button"><i class="trash icon"></i></div> |
| orButton | <div class="or"></div> |
| buttonGroup | <div class="ui buttons"></div> |
| createUrl | url for create. |
| updateUrl | url for update. |
| saveUlr | url for save. |
| deleteUrl | url for delete. |
| preCreate | event fires before insert new record |
| preUpdate | event fires before update record |
| preSave | event fires before save record |
| preDelete | event fires before delete record |
| postCreate | event fires after insert new record |
| postUpdate | event fires after update record |
| postSave | event fires after save record |
| postDelete | event fires after delete record |
| errorHandler | handler error |