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.
Live Demo | Download (ASPX and HTML)
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:
<script type="text/javascript">
$(document).ready(function() {
//Setup the sorting for the table with the first column initially sorted ascending
//and the rows striped using the zebra widget
$("#tableOne").tablesorter({ sortList: [[0, 0]], widgets: ['zebra'] });
//Setup the quickSearch plugin with on onAfter event that first checks to see how
//many rows are visible in the body of the table. If there are rows still visible
//call tableSorter functions to update the sorting and then hide the tables footer.
//Else show the tables footer
$("#tableOne tbody tr").quicksearch({
labelText: 'Search: ',
attached: '#tableOne',
position: 'before',
delay: 100,
loaderText: 'Loading...',
onAfter: function() {
if ($("#tableOne tbody tr:visible").length != 0) {
$("#tableOne").trigger("update");
$("#tableOne").trigger("appendCache");
$("#tableOne tfoot tr").hide();
}
else {
$("#tableOne tfoot tr").show();
}
}
});
});
</script>
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.
Subscribe