jQuery tableSorter and quickSearch Plugins Together Demo

Last week Dave Ward wrote a great post Use jQuery and quickSearch to interactively search any data. In his post he explained how to use the plugin and also a work around that is needed to make the plugin play nice with ASP.NET. I recommend taking a look at his post if your new to the quickSearch plugin. Reading through the comments, Jinno wanted to use the quickSearch plugin along with the tableSorter plugin which I thought was a great idea. Dave provided a hint in his comments that to get the two working together you would probably need to “re-tableSorter the table in quickSearch’s onAfter event” which got me started.

Screen Shots of End Product:

Once you have the jQuery file and plugins linked to in your document, this is all of the jQuery that is needed. I tried to explain in the comments what is going on:

So this is great and all, but I can’t seem to get this to work with the tableSorter pager plugin. The way the pager plugin works, only data from the first page is filtered. Maybe someone else can run with it and figure it out. I would recommend taking a look at how the tableSorter filter plugin does it and see if the filter part of quickSearch couldn’t be ported to the other? Another option might be to re-write the pager plugin to hide and show rows and not necessary remove/add them back to the DOM? Please let me know if you take this further than I have.