#mountable.js
What is it?
An easier way to pass JSON content into a HTML table using jQuery
- It's tiny! Just 3KB;
- Easy to customize;
- Allows callback functions;
- jQuery required.
Installation
How to use?
Turbo mode
Don't have time? Here we go!
- First off, create a
<table>like this one. Note to that<tr>element with a classmountable-modellisted below. This will be used by MounTable.
<table class="table" id="example1"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody> <tr class="mountable-model"> <td><input type="text" name="first_name[]" class="form-control"></td> <td><input type="text" name="last_name[]" class="form-control"></td> <td><input type="text" name="email[]" class="form-control"></td> </tr> </tbody> </table>- Let's catch a small JSON code (or object) to be used in this example. Please note that the key names listed below must be the same as declared on the input names listed above.
var jsonContentSimple = [ { "first_name": "John", "last_name": "Appleseed", "email": "[email protected]" }, { "first_name": "João", "last_name": "Canabrava", "email": "[email protected]" }, { "first_name": "Patrick", "last_name": "Grapeseed", "email": "[email protected]" }, { "first_name": "Xingling", "last_name": "Ping Pong", "email": "[email protected]" } ];- Here we go. Time to start MounTable. Note that the ID
#example1** listed below is the table's ID**.
$('#example1').mounTable(jsonContentSimple);And that's all! Enjoy your content in your table.
Complete mode
Do you want to fully customize MounTable? Here's all the options you'll need:
$('#example').mounTable(jsonContentComplex, { /* The model class */ model: '.mountable-model', /* No console messages */ noDebug: true, /* Options to your new line button */ addLine: { /* New line button selector */ button: "#button2", /* Callback function */ onClick: function () { console.log('Line added!'); } }, /* Options to your delete line button */ deleteLine: { /* Delete line button selector */ button: ".mountable-remove-line-2", /* Callback function */ onClick: function () { if (confirm("Are you sure?")) { console.log('Line removed!'); return true; } } } });Help?
Tweet me: @guimadaleno
License
GNU GPL
Peace!
