商品の基本情報や価格情報等を綺麗に見せる事ができるテーブル構成は、xhtml＋cssの方向へ進んでいる今でも普通に使われています。
商品情報一覧を見る際にあると便利なのは価格順に並べ替えたりするソート機能です。
しかし現在のヤフオクもそうですが並び替え（以下ソート）はページ全体を更新している作りが多いようです。
現状、Ajaxを使って非同期でソートしているサイトは、まだそれほどないんですかね。
（もしかしたら私が知らない所で有名サイトがバンバン使っているかもしれませんが・・・＾＾；）
そこで、今回はテーブルデータのソートを実践してみました。
【prototype】HTMLテーブルにて任意の項目で並べ替えをしてみた
上記サイトにてテストをしました。
使用したライブラリは、今やすっかり有名になっているTableKitというものです。
このライブラリを使うと列データのソート、リサイズ、編集などができます。
私が実際に必要だったのはソートとリサイズだったのでそれらを実装してみました。
使い方はTableKitに書いてあるのですが、非常に簡単です。
０．ファイルのダウンロード
１．jsファイルの読み込みを記述する
２．tableタグへのclass指定をする
３．thead、tbodyの構成を作る
４．thead内のthへclass指定をする
----- ０ -----
まずここからファイルをダウンロードします。
----- １ -----
head内にjsファイルの読み込みを書きます。
<script type="text/javascript" src="tablekit/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="tablekit/fastinit.js"></script>
<script type="text/javascript" src="tablekit/tablekit.js"></script>
----- ２ -----
テーブルタグに、使用したい機能の指定を記述します。
ソート・リサイズ・エディットの指定は、class内に
sortable
resizable
editable
を半角スペースで区切って書く事により実行可能になります。
私は編集は必要なかったのでeditableは加えませんでした。
<table class="sortable resizable">
----- ３ -----
theadとtbodyを使って項目部分とデータ部分の区別りを作ります。
----- ４ -----
この４はしてもしなくても今回のテストの場合は同じ結果が得られたのですが、ソートする際にその列のデータ型の指定を指定してみました。
列の値が数値なら
<th class="number" title="クリックで並び替え">ID</td>
文字列なら
<th class="text" title="クリックで並び替え">ID</td>
と指定するようです。
これで設定完了です。
ストレスなく非常にスムーズにソートが出来ますよ。
【prototype】HTMLテーブルにて任意の項目で並べ替えをしてみた
以下参考文献です
Good Sleep: テーブルの列をソートできるようにする
MOONGIFT: » 必見！ソート/編集ができる表ライブラリ「TableKit」
tableのソートや列の幅が変更可能なTableKit
HTMLのテーブルをソートする16の方法
何かしら参考になりましたらクリックをよろしくお願いします
「HTMLのテーブルをソートする16の方法」が
リンクきれてますね。