javascriptでソートが出来る表を作る

javascript

tablesort.jsを使う(日本語非対応)

1.表の項目部分をで囲む。

例)
	<thead>
		<tr>
			<th label="nocase">名前</th>
			<th label="nocase">性別</th>
			<th label="num">点数</th>
			<th label="case">HP</th>
			<th>nosortcolumns</th>
		</tr>
	</thead>

2.ソートしたいカラムにlabal属性を追加する。属性値は

  • case：アルファベットでの厳密なソート
  • nocase：アルファベットでの厳密でないソート
  • num：数値でのソート

3.ソートされる値の表をで囲む。
例)

	<tbody>
		<tr>
			<td>Sato</td>
			<td>female</td>
			<td>82点</td>
			<td><a href="#sato">Shall we dance?</a></td>
			<td>no1</td>
		</tr>
		<tr>
			<td>Suzuki</td>
			<td>male</td>
			<td>92点</td>
			<td><a href="#suzuki">Suzuki in Japan</a></td>
			<td>no2</td>
		</tr>
	</tbody>

4.ソート順を表示する画像"↑"、"↓"をjavascriptで読み込む。

<script type="text/javascript">
<!--
TableSort.arrowNone = " <img height=10 width=10 src='blank.gif' alt=''>";
TableSort.arrowUp = " <img height=10 width=10 src='arrow-up.gif' alt='↑'>";
TableSort.arrowDown = " <img height=10 width=10 src='arrow-down.gif' alt='↓'>";
//-->
</script>


日本語でソートしたい場合はMochiKitを使う。
http://www.mochikit.com/examples/sortable_tables/index.html