Tuesday, 25 August 2009

jQuery + TableSorter + QuickSearch = headache?

I know I haven't posted anything in a long while, but it's not because nothing happened or that I didn't have anything new to learn. It's just all in the lack of free time.

Anyway, lately I started using more and more jQuery in my development. And today the issue I stumbled upon is integrating the TableSorter and QuickSearch plugins in a page.

I found Bill Beckelman which explained how it should work, but when I tried to implement it locally, I realised that it's not actually working as expected. After a bit of debugging I realised that the quickSearch onAfter event is fired too early, and actually runs while the table is searched - not after that. Now that's a problem, because checking the number of results and striping wouldn't work well.

After a bit of online search, I didn't found any solution and ended up getting my hands dirty. Surprisingly, the fix wasn't hard at all (thanks to the small size of the js file!). To fix the issue all I had to do is find the qs() function, and move the options.onAfter(); call a couple of lines higher - inside the setTimeout call that actually does all the processing. Hey, that wasn't so hard!

The reason Bill Beckelman's demo works though, is that he uses an older version of the library, where the qs() method didn't use setTimeout.