Simple jQuery Editable Table Plugin For Semantic UI

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.