HTML Table Enhancement Plugin - jQuery simpleTable
File Size: | 14.2 KB |
---|---|
Views Total: | 1714 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

simpleTable is a jQuery plugin which enhances the regular HTML table with the following advanced features:
- Fixed table headers/columns.
- Dynamic data rendering.
- Single- or multi-row selection.
- Merges rows/columns.
How to use it:
1. Insert both jQuery library and the simpleTable plugin into your HTML file.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="simpletable.compress.js"></script>
2. Prepare your data to be presented in the HTML table.
var results = [ { id: '1', date: '05-02-2019', name: 'jQuery', address: 'Your Address Here', state: 'Alabama', city: 'Birmingham' }, { id: '2', date: '05-03-2019', name: 'Script', address: 'Your Address Here', state: 'Alaska', city: 'Anchorage' }, { id: '3', date: '05-04-2019', name: 'CSS', address: 'Your Address Here', state: 'American Samoa', city: 'Tafuna' }, { id: '4', date: '05-05-2019', name: 'HTML', address: 'Your Address Here', state: 'Arizona', city: 'Phoenix' }, ];
3. Render the data in an HTML table.
<div id="basicTable"> </div>
var option = { tableClass: 'cgridTable', head: [ { 'data-field': 'id', 'display': false }, { 'data-field': 'date', 'name': 'Date' }, { 'data-field': 'name', 'name': 'Name' }, { 'data-field': 'address', 'name': 'Address' } ] }; // initialize the table var ctable = cgrid.instance("basicTable", option); // generate the table ctable.genTable(results);
4. Create fixed table headers & columns.
var option = { tableClass: 'cgridTable', titleFixed: true, // fixed header head: [ { 'data-field': 'id', 'display': false }, { 'data-field': 'date', 'name': 'Date', 'fixed': true // fixed column }, { 'data-field': 'name', 'name': 'Name' }, { 'data-field': 'address', 'name': 'Address' } ] };
5. Make table rows selectable with checkboxes.
// single selection var oneRowSelTable; function oneRowSelTable() { var option = { withCheckBox: true, disableMutiSel: true, tableClass: 'cgridTable', head: [ { 'data-field': 'id', 'display': false }, { 'data-field': 'date', 'name': 'Date' }, { 'data-field': 'name', 'name': 'Name' }, { 'data-field': 'address', 'name': 'Address' } ] }; oneRowSelTable = cgrid.instance("oneRowSelTable", option); oneRowSelTable.genTable(results); } function oneRowClick() { var selectedRow = oneRowSelTable.getChecked(); if (selectedRow.length < 1) { alert("Select A Row"); } else { alert(JSON.stringify(selectedRow[0])); } } // multiple selection var multRowsSelTable; function multRowsSelTable() { var option = { withCheckBox: true, disableMutiSel: false, tableClass: 'cgridTable', head: [ { 'data-field': 'id', 'display': false }, { 'data-field': 'date', 'name': 'Date' }, { 'data-field': 'name', 'name': 'Name' }, { 'data-field': 'address', 'name': 'Address' } ] }; multRowsSelTable = cgrid.instance("multRowsSelTable", option); multRowsSelTable.genTable(results); } function multRowsClick() { var selectedRows = multRowsSelTable.getChecked(); if (selectedRows.length < 1) { alert("Select A Row"); } else { alert(JSON.stringify(selectedRows)); } }
6. Merge table cells.
var option = { tableClass: 'cgridTable', head: [ { 'data-field': 'id', 'name': 'ID', 'mergeRow': true, // merge rows }, { 'data-field': 'name', 'name': 'Name' }, { 'data-field': 'state', 'name': 'State' }, { 'data-field': 'city', 'name': 'City' }, { 'data-field': 'address', 'name': 'Address' } ], // merge columns mergeinrows: [1,3], mergerowcellsize: 2 };
This awesome jQuery plugin is developed by omengye. For more Advanced Usages, please check the demo page or visit the official website.