easy sortable tables

This weekend I did a great quick project with a nifty new (to me) jQuery tool -- I found my final creation immediately useful, see the final paragraph)

The backstory: There's a videogame I enjoy destressing with called "Earth Defense Force: Insect Armageddon" (nothing more relaxing that using guns and rockets to save the earth from endless hoardes of giant insects and robots.)

The game has a plethora of weapons, and while the game reveals some hard data of damage dealt and reload times and what not, it's not always easy to figure out what the most effective weapons are... enter twxabfn's EDF:IA Weapon FAQ . It features a massive table with all 372 weapons listed. The trouble is... it's a massive table and a typical user is probably only interested in the weapons for the soldier type they're playing, and even then probably wanting to focus on weapon type or tier. (In short, they're probably looking for "what are the most powerful weapons for my character right now")

So, I decided to make a more manageable UI to that big flat table. I found Christian Bach's  excellent jQuery tool tablesorter. With about one line of code, it makes a regular table sortable... it's smart about sorting numeric values by number (and not alphabetically) and you can even sort multiple columns.

The line of code in quetion is:
$("#myTable").tablesorter();

Put that in your document ready after including the js file like this:
<script src="/path/to/jquery.tablesorter.js"></script>
 and you're good to go, more or less... (optionally you can tell it which columns to sort on to begin with)

A couple caveats: one is you need to use <th> tags if you aren't already, and include <thead> (to wrap the header row) and <tbody> (for the other rows) tags inside the table, something lazy or old school folks might not always do. The other thing to note is you won't get the nice up and down sort arrows or pretty formatting unless you also include one of the themes (two skinds are downloadable from the bottom of the page) e.g.:
<link rel="stylesheet" href="style.css" type="text/css" />

After adding sortable columns, I built some simple filters -- I added classes to each table row indicating what armor, type, and tier it was, put in select boxes with the available options, then wired it together with Javascript to call $(".rowclass").hide(); on all the rows that weren't included with the current filter settings. I played with the idea of making a more complex UI with multiple selects or checkboxes (useful if you wanted to, say, compare Rocket Launchers vs Missile Launchers, or this tier's weapons to the next) but thought that for now the extra power wasn't worth UX complexity.

I also made a little readout of how many weapons were being displayed out of all available.

You can play with the finished product and view source for coding details of the filters and line counts.

So in terms of being useful... yesterday I was able to run the numbers to see that the SV Diablero mk2 was CLEARLY the best bet for close-in fighting for Level 5 Tactical Armor soldier, over any other shotgun or assault rifle, and that the Long Wattkins mur Missile Launcher I was messing around with was a complete waste of time... like, I said, USEFUL! (For certain flavors of use.)