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

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

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

利用しているライブラリはprototype.jsorder_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"を記します(ソースを見る限り、この2種類のみの対応のようです。)デモでは

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

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

あと、幾つかTipsを。

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

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


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

関連広告

Trackbacks:2

TrackBack URL for this entry
http://blog.katsuma.tv/mt-tb.cgi/17
Listed below are links to weblogs that reference
JavaScriptによるテーブルの列でソート from blog.katsuma.tv
HTMLのテーブルをソートする16の方法 from Xtyle::blog 2007-08-11 (土) 03:32
DHTML,JavaScript,AJAXを使った,テーブルのソート方法を紹介し...
BugTrack/136 from PukiWiki Plus! (PukiWiki/TrackBack 0.4) 2007-08-14 (火) 18:55
sortabletable.js 用ファイルが足りない ページ: BugTrack 投稿者: sonots 優先順位: 低 状態: 提案 カテゴリ: ...

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

Search
Feeds

Return to page top