デモ
機能・特徴
◇ テーブルソート。既存のHTMLソース(table)に手を加えず簡単にソート機能を追加してくれます。
◇ 軽量。ファイルサイズはわずか1.7KB。
◇ 無料。商用・非商用を問わず無料で利用可能です。
◇ 使い方簡単。
◇ 主要なブラウザーで動作。Firefox 2/3, IE 6/7/8, Opera, Safari, Chromeなどの主要なブラウザーで動作可能。
使い方
1)<head>...</head>の中に次のように記述します。
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>
2)HTMLソース(table要素)
<table cellpadding="0" cellspacing="0" border="0" class="sortable" id="sorter">
<tr>
<th class="nosort">ID</th>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
</tr>
<tr>
<td>1</td>
<td>Kaseem Huber</td>
<td>(587) 117-5521</td>
<td>.@samecore.org</td>
<td>Burlington</td>
<td>DE</td>
<td>81070</td>
</tr>
<tr>
<td>2</td>
<td>Oleg Michael</td>
<td>(539) 184-8550</td>
<td>pages@andit.edu</td>
<td>Covina</td>
<td>SC</td>
<td>48758</td>
</tr>
...
</table>
3)Javascriptで初期化
<script type="text/javascript">
var sorter=new table.sorter("sorter");
sorter.init("sorter",1);
</script>