Tablesorter makes happy users

It’s become clear that this dev blog has become too much status-update, not enough juicy technique-discussion! Jude has suggested a remedy: cutting the reports down to every other week, and doing a post-mortem or some other in-depth post on the off week. So lets test it out!

About a year or two ago, I started experimenting with the Tablesorter 2.0 plugin, and have been (slightly obsessively) adding it to just about every major list we have in the division ever since. We have a pretty grand selection of lists, and I’ve never met a list that couldn’t benefit from some sorting functionality. There are obvious benefits – the plugin is clean and well-documented, and allows you to easily add in table organization features, a few of my favorites being:

  • (very) advanced sorting
  • filtering individual columns
  • writing custom parsers

There are also some other really slick bonuses for the design-inclined (which we should all be, right?):

  • dynamic zebra striping (nothing frustrated me like my zebra striping going to s#$% when I added a sorter)
  • options for theming (with bootstrap and more)
  • use of HTML data elements for special hooks

A less obvious benefit of adding tablesorter (with the same features) to many of our lists is that it teaches our users how they can navigate through large sets of data on our site, so they can go to any of our apps and already have an upperhand in trying to get the info they need.

There is a drawback though — adding the same tools makes many of our lists look the same, so Katie and I are looking at different cues that we can add to pages to help users intuitively distinguish between them, such as page watermarks and color theming.