Back to menu

jQuery Table Sorting

Table Sorting

Table sorting! This simple plugin lets a user sort a plugin in a nice sort of way. The premise is pretty simple, and so is the plugin. You give it a table and it tries to let you sort it. It assumes the first row is a heading, to which the click events are bound, and anything after that is sortable. Numeric types are coerced into actual numbers so you shouldn't get things like 11 > 100. Two levels of sorting are applied, the second level is the previously selected column.

Usage

$(yourtable).sortify(options);

Options:

Download

Download the: full source or minified source

Demo

Simple call, with type coercion. Note that numbers are compared numerically and units are ignored, and string comparison is case sensitive. The default 'clicker' is the heading.

Note that two levels of sorting are performed, once by the current selection and then again (on elements which are equal) by the last selection.

StringNumber
Yellow100
Red234
Pink0.707
White16 seconds
Green$187
Blue€15
Blue19
Blue12
red3.51
We can use some CSS wizardry to add in a nice dynamic arrow. We can specify our own selector to identify the clicker. In this example we have disabled case sensitive string comparison and disabled type coercion, so numbers are now compared as strings, which has strange results but may sometimes be preferable. We have also set it so that the first column is sorted by default.

String Number
Yellow100
Red234
Pink0.707
White16 seconds
Green$187
Blue€15
red3.51