[Javascript-便利なスクリプト] テーブルにソート機能を簡単に追加 Table Sorter

Webアプリケーション開発をしていて、後からソート機能を追加しようと思うと、結構面倒なものですね。
その面倒をJavascriptで解決できないかと考えて探して見つけたのが、この「Table sorter」です。
この「Table sorter」を使えば、少しのコードを追加するだけで、簡単にテーブルにソート機能を付加できます。
使うか否より、まず デモ をご覧ください。

「Table sorter」のダウンロード

Download からFull releaseの物をダウンロードできます。
要らないものは、個々消してください。(私は実装時に殆ど消し、CSSの内容も位置も変えましたけど。)
ダウンロードしたファイルは、今回はサンプルとして [site_root]/js/tablesorter/ に解凍するとします。

「Table sorter」の使い方

このスクリプトは設置がとても簡単です。
・Table Sorterのスクリプトを読み込ませる
・ソート機能を適応させるテーブルにIDが割り当てられていない場合、IDを書き足す
・Tableタグにスタイルを適応させるためにクラスを書き足す
・ページ読み込み時に実行されるソート機能付加用のスクリプトを書き足す
・ヘッダ行を<thead>タグで囲っていない場合は書き足す
ぐらいの作業じゃないでしょうか。

サンプルとして以下のHTMLソースを [site_root]/sort.html に作成してみます。

<html>
<head>
	<title>Table Sorter</title>
	<link rel="stylesheet" type="text/css" href="js/tablesorter/themes/blue/style.css" />
	<script type="text/javascript" src="js/tablesorter/jquery-latest.js"></script>
	<script type="text/javascript" src="js/tablesorter/jquery.tablesorter.js"></script>
	<script type="text/javascript">
		$(document).ready(function()
			{
				$("#SortTable").tablesorter();
			}
		);
	</script>
</head>
<body>
	<table id="SortTable" class="tablesorter">
		<thead>
			<tr>
				<th>地区</th>
				<th>都道府県名</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>カンサイ</td>
				<td>オオサカ</td>
			</tr>
			<tr>
				<td>カンサイ</td>
				<td>キョウト</td>
			</tr>
			<tr>
				<td>カントウ</td>
				<td>トウキョウ</td>
			</tr>
			<tr>
				<td>カントウ</td>
				<td>チバ</td>
			</tr>
		</tbody>
	</table>
</body>
</html>


このソースで簡単なソートテーブルを表示できる事と思います。
ちなみに、データ行が1行も無い場合はエラーになるみたいなんで、動的にテーブルを生成する場合は、ダミー行を挿入するか、Tablesorterのコードを改変する必要有り。
ダミー行を挿入する場合は以下のような不可視の行をテーブルに含ませると良いでしょう。

<!-- <td />は列数と同じだけ作成する -->
<tr style="display:none;"><td /><td /></tr>


また、Table sorterの Configuration を参照する事で、細かい設定も可能となっています。
以下、よく使うであろう設定をいくつかのサンプルを挙げておきます。

ソートさせたくない列を指定する

以下のように、<head>内で記述したJavascriptを以下のように変更すると、1列目のソート機能を無効にする事が可能です。
列数の指定は、1番左の列を0、2番目の列を指定する場合は1と指定します。

$("#SortTable").tablesorter({
	headers: {
		0: { sorter: false }	// 1列目のソートを無効にする
	}
});


また、複数列を無効にしたい場合は、以下のようにカンマ(,)区切りで記述する事で複数行のソートを無効化できます。

$("#SortTable").tablesorter({
	headers: {
		0: { sorter: false },	// 1列目のソートを無効にする
		2: { sorter: false }	// 3列目のソートを無効にする
	}
});

数値としてソートするよう指定する

数値のソートを行いたい場合、デフォルトの設定のままでは文字列としてソートするために期待通りの結果が得られません。
数値としてソートを行いたい場合は、以下のように数値列を指定します。

$("#SortTable").tablesorter({
	headers: {
		0: { sorter: "digit" },	// 1列目を数値としてソートする
		2: { sorter: "digit" }	// 3列目を数値としてソートする
	}
});

その他技術情報

■カンマ付き数値のソート対応
Yahoo!知恵袋から引用。
質問者bokinaviさん、回答者spared_turkeyさんに感謝。

「jquery.tablesorter.js」の以下の記述を変更することにより、カンマ以下の数字もきれいにソートできるようになりました。備忘記録もかねて情報を残しておきます。

var i = parseFloat(s);
↓
var i = parseFloat(s.replace(/,/g,""));

Yahoo!知恵袋 より引用

「Javascript」に関する「本」の商品を自動的に表示しています。
キーワードに関連していない商品は、Amazonがオススメする商品です。気になる物があればどうぞ。

作成日：2008年05月25日(Sun) / 更新日：2010年11月08日(Mon)

[Javascript-便利なスクリプト] テーブルにソート機能を簡単に追加 Table Sorter

「Table sorter」のダウンロード

「Table sorter」の使い方

ソートさせたくない列を指定する

数値としてソートするよう指定する

その他 技術情報

その他技術情報