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:

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:

Next Page: jQuery Table Row Filter Options