This time I will share jQuery Plugin and tutorial about HTML Table Enhancement Plugin – jQuery simpleTable, hope it will help you in programming stack.
| File Size: | 14.2 KB |
|---|---|
| Views Total: | 1279 |
| 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.
1 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" |
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
5 |
<script src="simpletable.compress.js"></script> |
2. Prepare your data to be presented in the HTML table.
1 |
var results = [ |
2 |
{ id: '1', <a href="https://www.jqueryscript.net/time-clock/">date</a>: '05-02-2019', name: 'jQuery', address: 'Your Address Here', state: 'Alabama', city: 'Birmingham' }, |
3 |
{ id: '2', date: '05-03-2019', name: 'Script', address: 'Your Address Here', state: 'Alaska', city: 'Anchorage' }, |
4 |
{ id: '3', date: '05-04-2019', name: 'CSS', address: 'Your Address Here', state: 'American Samoa', city: 'Tafuna' }, |
5 |
{ id: '4', date: '05-05-2019', name: 'HTML', address: 'Your Address Here', state: 'Arizona', city: 'Phoenix' }, |
6 |
]; |
3. Render the data in an HTML table.
1 |
<div id="basicTable"> |
2 |
</div> |
01 |
var option = { |
02 |
tableClass: 'c<a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a>Table', |
03 |
head: [ |
04 |
{ |
05 |
'data-field': 'id', |
06 |
'display': false |
07 |
}, |
08 |
{ |
09 |
'data-field': 'date', |
10 |
'name': 'Date' |
11 |
}, |
12 |
{ |
13 |
'data-field': 'name', |
14 |
'name': 'Name' |
15 |
}, |
16 |
{ |
17 |
'data-field': 'address', |
18 |
'name': 'Address' |
19 |
} |
20 |
] |
21 |
}; |
22 |
23 |
// initialize the table |
24 |
var ctable = cgrid.instance("basicTable", option); |
25 |
26 |
// generate the table |
27 |
ctable.genTable(results); |
4. Create fixed table headers & columns.
01 |
var option = { |
02 |
tableClass: 'cgridTable', |
03 |
titleFixed: true, // fixed header |
04 |
head: [ |
05 |
{ |
06 |
'data-field': 'id', |
07 |
'display': false |
08 |
}, |
09 |
{ |
10 |
'data-field': 'date', |
11 |
'name': 'Date', |
12 |
'fixed': true // fixed column |
13 |
}, |
14 |
{ |
15 |
'data-field': 'name', |
16 |
'name': 'Name' |
17 |
}, |
18 |
{ |
19 |
'data-field': 'address', |
20 |
'name': 'Address' |
21 |
} |
22 |
] |
23 |
}; |
5. Make table rows selectable with checkboxes.
01 |
// single selection |
02 |
var oneRowSelTable; |
03 |
function oneRowSelTable() { |
04 |
var option = { |
05 |
withCheckBox: true, |
06 |
disableMutiSel: true, |
07 |
tableClass: 'cgridTable', |
08 |
head: [ |
09 |
{ |
10 |
'data-field': 'id', |
11 |
'display': false |
12 |
}, |
13 |
{ |
14 |
'data-field': 'date', |
15 |
'name': 'Date' |
16 |
}, |
17 |
{ |
18 |
'data-field': 'name', |
19 |
'name': 'Name' |
20 |
}, |
21 |
{ |
22 |
'data-field': 'address', |
23 |
'name': 'Address' |
24 |
} |
25 |
] |
26 |
}; |
27 |
oneRowSelTable = cgrid.instance("oneRowSelTable", option); |
28 |
oneRowSelTable.genTable(results); |
29 |
} |
