おねずみ三千世界

これより西方、十万億もの仏国土を過ぎて、世界があるが、それを名づけて極楽という。

jQuery用テーブルプラグイン Tablesorter

Javascript

http://tablesorter.com/docs/

Javascriptでソータブルだったり等の便利機能がついたテーブル用のプラグインって色々ありますよね。今回jQueryので探してたら一番お手軽＆簡単そうだったのがTablesorter。これは便利。

とりあえず、全て入ったzipファイルをダウンロードしてきて、解凍。
スクリプトをHTMLで呼び出し

<script type="text/javascript" src="/path/to/tablesorter/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/tablesorter/jquery.tablesorter.js"></script>

後で変更するとして、スタイルシートもデフォルトのを呼び出し

<link rel="stylesheet" type="text/css" href="/path/to/tablesorter/themes/blue/style.css" media="screen">

blueとgreenというテーマが最初に入っていてどちらか選べるんですが、単純に青/緑ではなく、blueのほうはベーシックな色合い、greenのほうはなかなか豪華なスタイルになります。

headerをつけたテーブルを用意します。

	<table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
		<thead>

			<tr>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Age</th>
				<th>Total</th>
				<th>Discount</th>

				<th>Difference</th>
				<th>Date</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Peter</td>

				<td>Parker</td>
				<td>28</td>
				<td>$9.99</td>
				<td>20.9%</td>
				<td>+12.1</td>
				<td>Jul 6, 2006 8:14 AM</td>

			</tr>
			<tr>
				<td>John</td>
				<td>Hood</td>
				<td>33</td>
				<td>$19.99</td>
				<td>25%</td>

				<td>+12</td>
				<td>Dec 10, 2002 5:14 AM</td>
			</tr>
			<tr>
				<td>Clark</td>
				<td>Kent</td>
				<td>18</td>

				<td>$15.89</td>
				<td>44%</td>
				<td>-26</td>
				<td>Jan 12, 2003 11:14 AM</td>
			</tr>
			<tr>
				<td>Bruce</td>

				<td>Almighty</td>
				<td>45</td>
				<td>$153.19</td>
				<td>44.7%</td>
				<td>+77</td>
				<td>Jan 18, 2001 9:12 AM</td>

			</tr>
			<tr>
				<td>Bruce</td>
				<td>Evans</td>
				<td>22</td>
				<td>$13.19</td>
				<td>11%</td>

				<td>-100.9</td>
				<td>Jan 18, 2007 9:12 AM</td>
			</tr>
		</tbody>
	</table>

テーブルに class="tablesorter" を付けておくと、デフォルトのスタイルシートが適用されるので、とりあえず是非。

そして、

<script type="text/Javascript"><!--
jQuery(function($) {
	$('#tablesorter_demo').tablesorter();
});
//--></script>

と、これだけで結構ちゃんとしたソート付きテーブルになります。

widgets: ['zebra']を付けると偶数・奇数行のtrへ自動的にクラス名が付与されたり

<script type="text/Javascript"><!--
jQuery(function($) {
	$('#list1').tablesorter({
	  widgets: ['zebra']
	});
});
//--></script>

など、なかなか素敵です。
こういうテーブル系プラグイン大好き。