3月 10 2008
jquery-tablesorter でソート可能なテーブル
ソート可能なテーブルの実装が欲しかったので、jQuery のプラグイン(?)として実装されている tablesorter を試してみた。
サンプルとして三国志大戦3の武将データリスト。
jQuery および tablesorter を展開しておく。
まずテーブルを用意。ノードのオブジェクトを取得できるように id を振っておく（振らなくても取得できるけど）。 このとき thead および tbody をしっかり書く。あと class 名を tablesorter にしておくと添付のスタイルに適合できる。
<table id="maintable" class="tablesorter">
<thead>
<tr><th>No</th><th>Score</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>70</td></tr>
<tr><td>2</td><td>98</td></tr>
<tr><td>3</td><td>84</td></tr>
</tbody>
</table>
jquery.js および tablesorter.js を読み込む。
<script src="jquery/jquery-1.2.3.min.js"></script>
<script src="jquery/jquery.tablesorter.min.js"></script>
ソート可能にするコードを追加する
$(document).ready(function() {
$("#maintable").tablesorter();
}
これで thead で定義されているカラムをクリックして各行をソートできるテーブルができる。簡単。
デフォルトではShiftキーを押しながら選択することで、複数行によるソートも可能。
あとは公式ドキュメントのサンプルを見てカスタマイズ。
ソートの条件を属性を見るようにしたり、
var myTextExtraction = function(node) {
var value = node.getAttribute("akesta:value");
return value ? value : node.innerHTML;
}
$("#maintable").tablesorter( {textExtraction: myTextExtraction} );
テーブルを縞々にしたり、
$.tablesorter.defaults.widgets = ['zebra'];
ある行だけソートさせないようにするとかデフォルトで複数行ソートとかもある。
サンプル（というか目的だけど）で三国志大戦の武将リストを作成してみた。:)
結構手軽だったので jQuery 使う場合にはいいかも。（他の実装は試してないんですが…）
