This time I will share jQuery Plugin and tutorial about Sort Table Data By Selected Column – jQuery tableSortable, hope it will help you in programming stack.
| File Size: | 36.1 KB |
|---|---|
| Views Total: | 716 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A lightweight and fast sortable table jQuery plugin that allows for quick sorting of table columns by clicking header cells.
Works with nested table headers and rowspan & colspan attributes.
See Also:
How to use it:
1. Create an HTML table to be sortable. To disable the sortable functionality on a column, simply add the nosort class as follows:
01 |
<table id="myTable"> |
02 |
<thead> |
03 |
<tr> |
04 |
<th rowspan="2" class="nosort" title="nosort">ID</th> |
05 |
<th rowspan="2">Company</th> |
06 |
<th colspan="2">Order</th> |
07 |
</tr> |
08 |
<tr> |
09 |
<th>Number</th> |
10 |
<th>Text</th> |
11 |
</tr> |
12 |
</thead> |
13 |
<tbody> |
14 |
<tr> |
15 |
<td>1.</td> |
16 |
<td>Alfreds Futterkiste</td> |
17 |
<td>2</td> |
18 |
<td>Tesla</td> |
19 |
</tr> |
20 |
<tr> |
21 |
<td>2.</td> |
22 |
<td>Ernst Handel</td> |
23 |
<td>0</td> |
24 |
<td>Ford</td> |
25 |
</tr> |
26 |
<tr> |
27 |
<td>3.</td> |
28 |
<td>Island Trading</td> |
29 |
<td>1</td> |
30 |
<td>BMW</td> |
31 |
</tr> |
32 |
</tbody> |
33 |
</table> |
2. Load the tableSortable’s script after jQuery.
1 |
<!-- jQuery is required --> |
2 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
3 |
<!-- From dist folder --> |
4 |
<script src="/path/to/dist/tableSortable.min.js"></script> |
5 |
<!-- From a CDN --> |
6 |
<script src="https://unpkg.com/jquery-tablesortable"></script> |
3. Attach the plugin to the HTML table and done.
1 |
$(function(){ |
2 |
$('table#myTable').tableSortable(); |
3 |
}); |
4. You’re also allowed to create your own sorting function using the cmp config.
1 |
$(function(){ |
2 |
$('table#myTable').tableSortable({ |
3 |
cmp: (a,b) => a < b ? -1 : 1 |
4 |
}); |
5 |
}); |
5. Add arrows to header cells when sorting column data in either ascending (A-Z, 1-9) or descending (Z-A, 9-1) order.
1 |
.table_sortable thead th.desc:after { |
2 |
content: '↑'; |
3 |
} |
4 |
5 |
.table_sortable thead th.asc:after { |
6 |
content: '↓'; |
7 |
} |
