Unobtrusive Javascript - Filterable Tables
Demo:
| States |
|---|
| Alabama |
| Alaska |
| Arizona |
| Arkansas |
| California |
| Colorado |
| Connecticut |
| Delaware |
| Florida |
| Georgia |
| Hawaii |
| Idaho |
| Illinois |
| Indiana |
| Iowa |
| Kansas |
| Kentucky |
| Louisiana |
| Maine |
| Maryland |
| Massachusetts |
| Michigan |
| Minnesota |
| Mississippi |
| Missouri |
| Montana |
| Nebraska |
| Nevada |
| New Hampshire |
| New Jersey |
| New Mexico |
| New York |
| North Carolina |
| North Dakota |
| Ohio |
| Oklahoma |
| Oregon |
| Pennsylvania |
| Rhode Island |
| South Carolina |
| South Dakota |
| Tennessee |
| Texas |
| Utah |
| Vermont |
| Virginia |
| Washington |
| West Virginia |
| Wisconsin |
| Wyoming |
So I was working on my DNS Editor back end last night, while using iTunes - and I decided I want the same type of filtered list that iTunes has. About 4 hours later, I came up with this, so here it is. It really only takes two lines of code, and one class statement, to add:
then, in your table, just make sure your class name includes "filterable". The input box ID must be the table id plus "_filter". In addition, if you want to make a row that never gets filtered, you can include "nofilter" in the td's class name.
If you want to get the library right now, you cen grab it here. You will find the code for the demo down further.
Right now, I am filtering on the inputbox value being anywhere in each cell's text - however, since I am using a regex, it would be very easy to modify to only match at the start of the string, etc. Here within the next few weeks, I hope to mature this library to the point of have some way of specifying (perhaps based on the class) what type of match you want, as well as specifying which columns in the table you want to match against.
Thanks go to Stuart Langridge, over at Kryogenix, for ideas on handling tables unobtrusively, in his sorttable library (here). In fact, I wrote this library to be compatible with his - so you can have sortable tables, that are also filterable.
Sample code after the break
Here is the code snippet for the above example:
-
-
<script src="http://www.lokkju.com/blog/wp-content/uploads/2006/01/filtertable.js" type="text/javascript" language="javascript" charset="utf-8"></script>
-
<link href="http://www.lokkju.com/blog/wp-content/uploads/2006/01/filterabledemo.css" rel="stylesheet" type="text/css" media="all" />
-
<div id="filterable_demo">
-
<div id="list_div">
-
<table id="states_filterable" class="filterable_sortable">
-
<tr class="nofilter">
-
States
-
</th>
-
</tr>
-
</table>
-
</div>
-
</div>
-





