Easy Inline Editor For HTML Tables - jQuery fullTable
File Size: | 39.2 KB |
---|---|
Views Total: | 20594 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

fullTable is an easy yet full featured jQuery data table plugin that lets you create a dynamic CRUD (create, read, update, delete) table with sorting, filtering, input validation and client side value processing. Compatible with Bootstrap framework.
How to use it:
1. To use the plugin start with adding the following JavaScript and CSS files in your html document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.fulltable.js"></script> <link rel="stylesheet" href="jquery.fulltable.css">
2. Create a normal html table with initial tabular data as these:
<table class="fulltable fulltable-editable" id="test-table"> <thead> <tr> <th fulltable-field-name="firstname">First name</th> <th fulltable-field-name="lastname">Last name</th> <th fulltable-field-name="gender">Gender</th> <th fulltable-field-name="age">Age</th> <th fulltable-field-name="height">Height</th> <th fulltable-field-name="description">Description</th> </tr> </thead> <tbody> <tr> <td><span>John</span></td> <td><span>Smith</span></td> <td><span>xy</span></td> <td><span>23</span></td> <td><span>1.72</span></td> <td><span>Famous explorer</span></td> </tr> <tr> <td><span>Peter</span></td> <td><span>Pan</span></td> <td><span>xy</span></td> <td><span>10</span></td> <td><span>1.60</span></td> <td><span>Flyer boy who does not grow</span></td> </tr> <tr> <td><span>Mary</span></td> <td><span>Stevenson</span></td> <td><span>xx</span></td> <td><span>35</span></td> <td><span>1.69</span></td> <td><span>Unknown woman</span></td> </tr> </tbody> </table>
3. Initialize the plugin and config the input fields for the inline editor.
$("#test-table").FullTable({ "alwaysCreating":true, "fields": { "gender":{ "options":[ { "title":"Male", "value":"xy" }, { "title":"Female", "value":"xx" } ], "mandatory":true, "placeholder":"Select one", "errors":{ "mandatory":"Gender name is mandatory" } }, "firstname":{ "mandatory":true, "errors":{ "mandatory":"First name is mandatory" } }, "lastname":{ "mandatory":true, "errors":{ "mandatory":"Last name is mandatory" } }, "age":{ "type":"integer", "mandatory":false, "validator":function(age) { if (age >= 0) { return true; } else { return false; } }, "errors":{ "type":"Age must be an integer number", "mandatory":"Age is mandatory", "validator":"Age cannot be negative" } }, "height":{ "type":"decimal", "mandatory":false, "validator":function(height) { if ((height > 0.3) && (height <= 2.8)) { return true; } else { return false; } }, "errors":{ "type":"Height must be a number", "mandatory":"Height is mandatory", "validator":"Height cannot be neither biggest than 2.8 nor lowest than 0.3" } }, "description":{ "mandatory":false } } });
4. Draw the CRUD table.
$("#test-table").FullTable("draw");
5. More configuration options.
$("#test-table").FullTable({ // is editable "editable":true, // is filterable "filterable":true, // is sortable "orderable":true, // is selectable "selectable":false, // event handlers "on":{ "update":function() { } } });
6. Get the current data.
$("#test-table").FullTable("getData")
Change log:
2017-10-12
- Compatible with old browsers.
2017-10-10
- Correction of errors.
2017-10-06
- Compatibility with IE8
This awesome jQuery plugin is developed by joseluisballesterosd. For more Advanced Usages, please check the demo page or visit the official website.