仕事でHTMLテーブルでエクセルのオートフィルタのようなものを使いたい、という要望があり、多分探せばそんなスクリプトがあるんじゃないかと思い探したところやっぱりありました。
http://www.javascripttoolbox.com/lib/table/index.php

これは、tableやth要素にclass属性でtable-autofilterとかtable-filterableとしてあげるだけで, ソートやらフィルタリングやらページングやら(いずれもクライアント側で処理)を簡単に装備できてしまうという超スグレモノです。

早速やってみる。
まずソースをダウンロードして、とりあえず table.js という名前で保存してインクルード。JavaScriptに関してはこれだけで、自分でなにか書く必要とかはありません。

	<%= javascript_include_tag "table.js" %>	

次に、フィルタリングしたいテーブルのclass属性に class="table-autofilter" を追加して、フィルタしたい列のthに class="table-filterable"を指定。
こんな感じでしょうか、、。

 

<table class="table-autofilter">
  <thead>
    <th class="table-filterable">文字列</th>	 

※テーブルヘッダは thead, データ行は tbodyに書かないとダメなようです。JavaScriptソース見たらそうなってました、、、。

適当にデータを作って、ページを表示してみる。

22)
35)
 00)
06)

素晴らしい!