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 = $('<div class="filters"><h3&gt...