0 minutes, 54 seconds
I’ve been doing a lot of work in the day job working with Joseph McCullough’s wonderful Stupid-Table-Plugin for jQuery. This allows you to take a static table and with a little JS code, make it into a dynamic, client side sortable table. As well it’s HIGHLY configurable and totally awesome!
The Odd Behavior
However, I noticed when I had a table with data like this:
| Fruit | Color |
|---|---|
| banana | yellow |
| peach | yellow |
| squash | yellow |
| apple | red |
Sorting by “Fruit” worked exactly as expected. However, sorting by “Color” yielded odd results. While the 4 colors always were in the correct order (grouped together before or after “red”), the fruit column would change order if you clicked the “Color” header more than twice. Very confusing! Upon close inspection, on the 1st, 5th, 9th etc. clicks of “Color” the “Fruit” columns would be the same order and the same is true of 2nd, 4th, 6th etc. clicks. It then dawned on me that Stupid-Table-Plugin was reverse sorting rows with identical values each time I clicked the same “Color” column head.
The untangle
The fix, once knowing the problem, was easy. Just declare a data-sort-value for each color and append a random string to it (eg foo, bar, baz):
| Fruit | Color |
|---|---|
| yellow | |
| peach | yellow |
| squash | yellow |
| apple | red |
This way the colors will always be sorted in a consistent order. Point haired bosses rejoice – your underling coder made your table sort right!
Addendum
I want to again thank Stupid-Table-Plugin for being awesome. Great discussions like Issue #106, “weird behavior when td have empty values” both gave me faith in the author as being open to feedback, and made me trust the plugin to be well thought out. Long term, this of course should be fixed, and hopefully will be with Issue #112 – “Sort on Multiple Columns”.
Finally, if you are sorting a BIG table with a lot of data-sort="int" instead of data-sort="string", like above, you can simply make your values into data-sort="float" and concatenate a random, but unique to that row, decimal onto data-sort-value (eg, “300” => “300.0002” and “90” => “90.0301”). This way the sort will still work. If you tried to sort the float values as a strings, it would put “300” before “90” ;)