Author: | shaffooo |
---|---|
Views Total: | 728 views |
Official Page: | Go to website |
Last Update: | August 20, 2015 |
License: | MIT |
Preview:

Description:
SelectionTable is a lightweight JavaScript table library which allows you to select single or multiple table rows with checkboxes and display selected items in a new container.
Also provides a client side search functionality to filter out table rows based on user input.
How to use it:
Add the userstable.css and usertables.js to your webpage.
<link rel="stylesheet" href="userstable.css"> <script src="usertables.js"></script>
Markup html structure.
<div class="selection-table"> <div class="elements-section cw"> <input type="text" class="elements-filter" placeholder="Search" onkeyup="FilterElements(this)"> <div> <table class="elements-header"> <tr> <td><input type="checkbox" id="all" onclick="SelectAll(this)"></td> <td>User Name</td> </tr> </table> </div> <div id="elements-contents" class="elements-contents ch"> <table id="elements" class="elements"> </table> </div> </div> <div id="selected-elements" class="selected-elements cw"> <div id="editedusers" class="selected-elements-contents"> </div> </div> </div>
Replace table data with yours.
var allUsers = [{id:'1', name:'Monica Anderson'},...];