Basic usage
<script src='tablesort.min.js'></script>
<script>
new Tablesort(document.getElementById('table-id'));
</script>
Sort Types
- strings
- numbers
- currency
- Basic dates in
dd/mm/yy
or dd-mm-yy
format. Years can be
4 digits. Days and Months can be 1 or 2 digits.
Additional options
Ascending/Descending
You can pass an alternate sort order as a second parameter. By default sort is ascending. To change this, set:
new Tablesort(document.getElementById('table-id'), {
descending: true
});
Note: If you are using the default CSS provided you'll need to reverse the class names that style the arrows.
Exclude columns or rows
For columns or rows that do not require sorting, you can add a class of
no-sort
to a columns
th
or a
tr
element.
<th class='no-sort'>Name</th>
<tr class='no-sort'>
<td>1</td>
<td>Gonzo the Great</td>
<td>12-2-70</td>
<td>Radishes</td>
<td>$0.63</td>
</tr>
Override data that is sorted on
Sometimes text inside cells is not normalized. Using a `data-sort` attribute you can use optional data to sort on.
<tr>
<td>1</td>
<td data-sort='1357656438'>01/08/13 @ 8:47:18am EST</td>
</tr>
<tr>
<td>2</td>
<td data-sort='1078673085'>3/7/2004 @ 9:24:45 EST</td>
</tr>
Refresh sort on appended data
Tablesort supports sorting when new data has been added. Simply call the refresh method.
var table = document.getElementById('table-id');
var sort = new Tablesort(table);
// Make some Ajax request to fetch new data and on success:
sort.refresh();
Trumpet Player |
Born |
Roy Eldridge |
1911 |
Tim Hagans |
1954 |
Freddie Hubbard |
1938 |
Append a row
Remove a row
$ ender add tablesort
Add tablesort
as an internal chain method.
$('.table').tablesort();
Default style
Add the styling below to your CSS or roll with your own.
th.sort-header {
cursor:pointer;
}
th.sort-header::-moz-selection,
th.sort-header::selection {
background:transparent;
}
table th.sort-header:after {
content:'';
float:right;
margin-top:7px;
border-width:0 4px 4px;
border-style:solid;
border-color:#404040 transparent;
visibility:hidden;
}
table th.sort-header:hover:after {
visibility:visible;
}
table th.sort-up:after,
table th.sort-down:after,
table th.sort-down:hover:after {
visibility:visible;
opacity:0.4;
}
table th.sort-up:after {
border-bottom:none;
border-width:4px 4px 0;
}
Licence
MIT
Bugs?
File Them