Simple jQuery Editable Table Plugin For Semantic UI
File Size: | 712 KB |
---|---|
Views Total: | 22892 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A jQuery based table plugin that uses Semantic UI to create a nice looking editable data table on your web application.
How to use it:
1. Load the required Semantic UI framework in your document.
<link href="css/semantic.min.css" rel="stylesheet"> <script src="js/semantic.min.js"></script>
2. Load jQuery library and the jQuery Semantic Editable plugin's script in the document.
<script src="js/semantic.editableRecord.js"></script>
3. Create a data table as follow.
<table id="example1" 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>
4. Initialize the data table.
$('#example1').editableRecord({ idName: '<your id name>', saveUrl:'<your url to save the data>', deleteUrl: '<your url to delete the data>' });
5. All the default settings.
//attributes idName: null, multiple: true, addable: true, //buttons 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>', detailButton: '<div class="ui icon button"><i class="unordered list icon"></i></div>', orButton: '<div class="or"></div>', buttonGroup: '<div class="ui buttons"></div>', //urls createUrl: null, updateUrl: null, saveUlr: null, deleteUrl: null, //events preCreate: jQuery.noop, preUpdate: jQuery.noop, preSave: jQuery.noop, preDelete: jQuery.noop, postCreate: jQuery.noop, postUpdate: jQuery.noop, postSave: jQuery.noop, postDelete: jQuery.noop, detailButtonClicked: jQuery.noop, errorHandler: jQuery.noop
Change logs:
2015-06-26
- fixed select and add color input type
2015-05-29
- add addable, uncap fields with no name attribute, detail button and detail button clicked event.
2015-05-07
- add select type plugin and improve the template copy
2015-04-27
- fixed when error occur in update, new button still loading
2015-04-26
- fixed save record is not correct
2015-04-24
- allows to get row template from thead
This awesome jQuery plugin is developed by YueLiRex. For more Advanced Usages, please check the demo page or visit the official website.