Using jQuery to Filter Table Rows

I’m retouching an old system, and though it could use a filter on it’s report page. The report has a large table with about 300 rows. After some play with jQuery, I came out with this little filter.
The project is using the .net GridView control, so I had limited control over the output HTML code. Still, I think this code can work for most tables. One thing to notice: you should use the class “filterable” on your table or on one of its parents for the code to work.
First, we need a text box:

Filter:
<input type="text" id="FilterTextBox" name="FilterTextBox" />

And the code:

$(document).ready(function(){
 //add index column with all content.
 $(".filterable tr:has(td)").each(function(){
   var t = $(this).text().toLowerCase(); //all row text
   $("<td class='indexColumn'></td>")
    .hide().text(t).appendTo(this);
 });//each tr
 $("#FilterTextBox").keyup(function(){
   var s = $(this).val().toLowerCase().split(" ");
   //show all rows.
   $(".filterable tr:hidden").show();
   $.each(s, function(){
       $(".filterable tr:visible .indexColumn:not(:contains('"
          + this + "'))").parent().hide();
   });//each
 });//key up.
});//document.ready

Explanation:

1. Create Index Column – lines 2-7 – The jQuery “:contains()” selector is case sensitive, so at the first step I create another column on the table, than contains the whole row’s text on lowered case. On line 3 you may have noticed I’m filtering only rows that has <td>, to avoid hiding the header column (presumably, the header only has <th>). Later, I could make searches in this column alone. This works as long as the text on the table doesn’t change.
2. Bind the Key-Up Event – lines 8-16.
3. Make an array with all filter keywords – line 9 – Get all word from the text box and put them in an array. Again, I’m using toLowerCase() because “:contains” is case sensitive.
4. Hide rows – lines 12-15 – I’m using jQurey’s each function to go through the array, and hiding all rows that don’t contain the current keyword (Assuming AND between all words).

That’s it. Now rows on our table can be filtered.

About these ads