jQuery and Tablesorter in Action

I finally had time to get around to fixing the little problems I was having with the dev version of our Dedicated Servers page. The functionality was fine; it just looked really dumb for a second or two as the javascript loaded.

Click here to see it in action.

As can be expected, I ran into some problems initially because of the filtering through the server choices at the top and the fact that the tabbed navigation presents another set of columns that are hidden from view when the page loads.

The zebra-striping is done with a class called “alt”. Whenever the table is sorted or filtered, all “alt” tags are removed from the rows and then reapplied to odd rows.

I found that the most efficient way to think about designing something like this is to think of the page in certain states. Mentally map out the initial state the page should be in and then think of the desired state after filtering or sorting. Use CSS to set the initial state then just lean back and script the other states. Doing the rockaway after leaning back is completely optional.

My problem was that I was trying to use jQuery to set the initial state and this caused all the columns to appear at once until the hide() statement kicked in. The arrows that indicate up and down are preloaded.

Big up yourself to jQuery and Tablesorter.

I went over to look at our new offices today and they’re pretty wonderful. I have a huge secluded area just for my little web team, which is great. As it is right now, we sit a little too close to the telesales people such that all day we hear a cacophonous din of people saying “hello?” after they’ve been hung up on.

No other complaints though, life is grand.

Post a Comment

You must be logged in to post a comment.