Sorting with a client-side script like this is faster than doing it on the server-side. You can also use HTML in the table cells, since only the text content is sorted. But if the HTML table is generated by a server-side script or database query in the first place, it might make more sense to do the sorting on that side as well.
Should work in newer desktop browsers (2015), while mobile browsers seem less good at sorting letters beyond the ISO basic Latin alphabet (A-Z). But even buggy browsers should at least sort A-Z properly. I haven't tested non-Western alphabets.
trim()in the script.
Click a button in a column's top row to sort the table by that column. Click the button again to reverse the order.
|Price||English text with HTML||Weight|
The script creates an array of the sorted column cells' text content (the following is ignored: leading and trailing whitespace, HTML, form field values, image ALT text and other HTML attribute values), then sorts the array. If the
isNaN() method returns true for an array item, the array is sorted alphabetically, otherwise numerically. Finally the table rows are arranged in the same order as the sorted array.
To make a table sortable, add the custom attribute
data-sortable-table. Multiple tables on the same page can be sorted.
You can force a column with mixed content to be sorted numerically by adding the custom attribute
data-sorting-type="number" to the column's TH element. Then the script ignores all characters except numbers, decimal periods and a beginning minus sign (-) when sorting. For example, "$2,500" should be sorted as "2500". This might be useful for numerical columns containing things like units, temperature or money symbols.
Alphabetical sorting is done with the localeCompare() method , so that letters in different alphabets are (hopefully) sorted in correct order. For example, in German Ä and Ö should be sorted after A and O, respectively, while in Swedish Ä and Ö are distinct letters that appear last in the alphabet (after Z and Å).
The desired sorting language can be specified in an optional LANG attribute for each table, which the script then uses in
localeCompare(). If no LANG attribute is specified the script defaults to "en" (English).
published: Nov 10, 2015
last modified: Jan 26, 2017