Dynamic Table Operation Plugin With jQuery - Tabullet
File Size: | 58.7 KB |
---|---|
Views Total: | 13732 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tabullet is a simple, lightweight jQuery plugin which provides basic table operations (add / delete / edit rows) on your html table. Compatible with Bootstrap's table & button styles.
How to use it:
1. Include the Bootstrap's style sheet in the head section of the webpage (OPTIONAL).
<link rel="stylesheet" href="bootstrap.min.css">
2. Include jQuery library and the jQuery tabullet plugin at the bottom of the webpage.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="dist/Tabullet.js"></script>
3. The html structure for the dynamic table.
<table class="table table-hover" id="table"> <thead> <tr data-tabullet-map="id"> <th width="50" data-tabullet-map="_index" data-tabullet-readonly="true"> No </th> <th data-tabullet-map="name">Nama</th> <th data-tabullet-map="level">Level</th> <th width="50" data-tabullet-type="edit"></th> <th width="50" data-tabullet-type="delete"></th> </tr> </thead> </table>
4. Insert your custom data into the table.
var source = [ {id: 1, name: "Aditya Purwa", level: "Admin"}, {id: 2, name: "Aditya Avaga", level: "Manager"}, {id: 101, name: "Aditya Myria", level: "User"}, {id: 102, name: "Lucent Serentia", level: "LOD"}, {id: 103, name: "Hayden Bapalthiel", level: "King"}, ];
5. Initialize the plugin.
$("#table").tabullet({ data: source, });
6. All configuration options for the plugin.
$("#table").tabullet({ rowClass: '', columnClass: '', tableClass: 'table', textClass: 'form-control', editClass: 'btn btn-default', deleteClass: 'btn btn-danger', saveClass: 'btn btn-success', deleteContent: 'Delete', editContent: 'Edit', saveContent: 'Save', action: function () { } });
This awesome jQuery plugin is developed by adityapurwa. For more Advanced Usages, please check the demo page or visit the official website.