jQuery Table Row Filtering

Earlier we examined sorting and paging as techniques for helping users focus on relevant portions of a table's data. We saw that both could be implemented either with server-side technology or with JavaScript. Filtering completes this arsenal of data arrangement strategies. By displaying to the user only the table rows that match a given criterion, we can strip away needless distractions.

We have already seen how to perform a type of filter, highlighting a set of rows.

Now we will extend this idea to actually hiding rows that don't match the filter.

We can begin by creating a place to put our filter buttons. In typical fashion, we insert these controls using JavaScript so that people without scripting available do not see the options:

$(document).ready(function() { 
 
$('table.filterable').each(function() { 
 
var $table = $(this); 
 
$table.find('th').each(function (column) { 
 
if ($(this).is('.filter-column')) { 
 
var $filters = $('</p>
<div class="filters">
<h3>Filter by ' 
 
+ $(this).text() + ':</h3>
</div>
'); 
 
$filters.insertBefore($table); 
 
} 
 
}); 
 
}); 
 
}); 
   

We get the label for the filter box from the column headers, so that this code can be reused for other tables quite easily. Now we have a heading awaiting some buttons: