A simple, lightweight jQuery plugin for creating sortable tables.
npm install jquery-tablesortA tiny & dead-simple jQuery plugin for sortable tables. Here's a basic demo.
Maintainers Wanted
---
I don't use this library much anymore and don't have time to maintain it solo.
If you are interested in helping me maintain this library, please let me know! Read more here »
Your help would be greatly appreciated!
Install
---
Just add jQuery & the tablesort plugin to your page:
``html`
(The plugin is also compatible with Zepto.js).
It's also available via npm
npm install jquery-tablesort
and bower
bower install jquery-tablesort
Basic use
---
Call the appropriate method on the table you want to make sortable:
`javascript`
$('table').tablesort();
The table will be sorted when the column headers are clicked.
To prevent a column from being sortable, just add the no-sort class:
`html`Photo
Your table should follow this general format:
> Note: If you have access to the table markup, it's better to wrap your table rows
in and
elements (see below), resulting in a slightly faster sort.
>
> If you can't use , the plugin will fall back by sorting all rows
that contain a element using jQuery's .has() method (ie, the header row,
containing elements, will remain at the top where it belongs).`html
...
...
`If you want some imageless arrows to indicate the sort, just add this to your CSS:
css
th.sorted.ascending:after {
content: " \2191";
}th.sorted.descending:after {
content: " \2193";
}
`How cells are sorted
---
At the moment cells are naively sorted using string comparison. By default, the
's text is used, but you can easily override that by adding a data-sort-value attribute to the cell. For example to sort by a date while keeping the cell contents human-friendly, just add the timestamp as the data-sort-value:`html
March 7, 2012
`This allows you to sort your cells using your own criteria without having to write a custom sort function. It also keeps the plugin lightweight by not having to guess & parse dates.
Defining custom sort functions
---
If you have special requirements (or don't want to clutter your markup like the above example) you can easily hook in your own function that determines the sort value for a given cell.
Custom sort functions are attached to
elements using data() and are used to determine the sort value for all cells in that column:`javascript
// Sort by dates in YYYY-MM-DD format
$('thead th.date').data('sortBy', function(th, td, tablesort) {
return new Date(td.text());
});// Sort hex values, ie: "FF0066":
$('thead th.hex').data('sortBy', function(th, td, tablesort) {
return parseInt(td.text(), 16);
});
// Sort by an arbitrary object, ie: a Backbone model:
$('thead th.personID').data('sortBy', function(th, td, tablesort) {
return App.People.get(td.text());
});
`Sort functions are passed three parameters:
* the
being sorted on
* the for which the current sort value is required
* the tablesort instanceCustom comparison functions
---
If you need to implement more advanced sorting logic, you can specify a comparison function with the
compare setting. The function works the same way as the compareFunction accepted by Array.prototype.sort():`javascript
function compare(a, b) {
if (a < b) {
return -1; // a is less than b by some ordering criterion
}
if (a > b) {
return 1; // a is greater than b by the ordering criterion
} return 0; //
a is equal to b
}
Events
---
The following events are triggered on the
| currently sorted by (null if unsorted). tablesort.index // The column index of tablesort.$th (or null). tablesort.direction // The direction of the current sort, either 'asc' or 'desc' (or null if unsorted). tablesort.settings // Settings for this instance (see below). ` javascript` method described above. Simply grab the tablesort instance and call .sort(), padding in the | element you want to sort by.
|
|---|