JavaScriptによるテーブルの列でソート

Excelなど表で出力されるデータは列の先頭をクリックしてソートしたいことが多々あります。WindowsならExplorerでも標準でありますよね、例のアレ。

Web1.0的考えならクリック毎にサーバで処理してソートされた表のHTMLを生成してブラウザに返して・・・な流れになりますが、Web2.0なこのご時世はJavaScriptだけで解決できます。デモはこちら。

利用しているライブラリはprototype.jsとorder_by_sort.js。
後者は公式サイトがダウンしちゃってるみたいなんで気になる人はデモページからご利用ください。

order_by_sort.jsのポイントは既存のtableに非常に組み込みやすいの一点に尽きます。<thead>, <tbody>タグを使ったtableなら何も修正する必要はありません。もし<thead>, <tbody>を付けていないtableなら、1行目の<tr>から</tr>までをtheadタグで囲ってやり、tr→thに変換するだけでOK。そして最後に次の関数を呼び出します。

<script type="text/javascript">
<!--
new OrderByColumn("tableID",["type_of_column", ... ]);
//-->
</script>

tableIDはtableタグに付けたidです。デモでは「sample_order_by_column_table」にしています。
type_of_columnはどのように整列させるか、を記したものです。文字列による整列なら"string", 数値による整列なら"number"を記します（ソースを見る限り、この２種類のみの対応のようです。）デモでは

new OrderByColumn( "sample_order_by_column_table", ["string","number","string"] );

と、呼び出しています。（スペースの都合上、改行しています）

あと、幾つかTipsを。

整列させたくない列はthead内に「th」ではなく、「td」で定義させます。
HTMLの文法的には微妙ですが、てっとり早く解決するにはとりあえずこれで回避できます。

また、aタグに囲まれたデータ（デモではCommunityの列）の場合、aタグにtitle属性を他の属性よりも先に記すことで整列可能です。titleでしかるべき値をセットしておかないと思ったような動作をしてくれません。

tableの整列ライブラリはMochiKitにもあるみたいですが（試してないです・・・）、こんな感じで手軽に組み込めるのはいいですね。