This technique is intended for large tables with many rows of data, and its purpose is to enable the user to very quickly select the data they want to see, and hide everything else. For any or all of the columns in the table, the script generates a drop down menu that contains all the possible values in that column. The user can then select (using shift+click or just clicking one normally) the match(es) they want, and all the rows in the table that don’t match are hidden from view. The user can then use other columns to narrow their view further, or select “(all)” from any filters in use, to reset the state of the table.
For my example here I’ll be using my video game collection posted on GameSpot in September 2007 (which I don’t keep up to date anymore). For some example uses, you could select “PS2” from the Platform filter to just view my PS2 games. Or, you could shift+click a GameSpot Score range, say 9.0-9.9, and view all games rated 9.0 or above. You can even filter several columns in combination; for example, to view RPGs for the SNES you could select “SNES” from the Platform filter, and then “Role–Playing” from the Genre filter.
If you have any questions or comments I’d love to hear them. Leave a comment on the associated blog entry or shoot me an email.
Include the JS file, and then give the <th> cells of the columns you want to be filtered the ”filtered“ class, and the script handles the rest.
The script scans the DOM, looking for <th> cells with the class of “filtered”. If it finds any, it creates a hidden <div> for each column. The <div>s contain <select>s with the attribute of multiple on, so that the user can shift–click to make multiple selections if necessary.
The script then goes through the contents of every <td> in that column and stores each entry in an array, after stripping any HTML from the contents and removing any duplicates or blank cells. These entries are then alphabetized and inserted as <option>s into the <select>s.
Lastly the filter links are added inside each of the classed <th>s, and these show and hide their matching filter menu when clicked on. The script does this by assigning each filter and matching filter menu with corresponding id attributes (“col-filter0” and “col-filter0-select”, for example) so it knows which one to show, and then detects the position on the page of the filter link and positions the menu right under it.
All code within is under Creative Commons license and free for use, just give credit where credit is due. Icons used in this example are from the Silk Icons set.