jQqueryのテーブルソートプラグインを使ってみました。やり方は驚くほど簡単でしたが、一応メモとして残しておきます。
今回使用したプラグインはtablesorterです。
サンプルは以下です。cell1、２、3をクリックしてみてください。
| cell1 | cell2 | cell3 |
|---|---|---|
| 1 | 3 | 2 |
| 2 | 2 | 1 |
| 3 | 1 | 3 |
上記のサンプルのソースは以下の通り
jquery.tablesorter.min.jsはtablesorterからダウンロードします。
関係ない部分は省略していますが、構造的にこのような配置となるように各記述を行います。
tableに付加したidと、javascriptで関連付ける#idを一致させること。
tableにtheadとtbodyをしっかりと書くこと、あたりが注意点でしょうか。
<html>
<head>
<script src="ドメイン名/js/jquery-1.2.3.min.js"></script>
<script src="ドメイン名/js/jquery.tablesorter.min.js"></script>
<script>
$(document).ready(function() {
$("#tablesort").tablesorter();
});
</script>
</head>
<body>
<table id="tablesort" class="tablesorter">
<thead>
<tr>
<th scope="col">cell1</th>
<th scope="col">cell2</th>
<th scope="col">cell3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>3</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
手順としてはたったこれだけです。
これで簡単に既存のテーブルにソート機能を付加。
全くすごい時代になったものですね。
見知らぬ誰かに感謝、です。
このプラグイン、設定を行えば他にも様々なことができるようです。
1行ごとに違う色にするとか、そういうの。
今回はそこまではちょっと。
また勉強したら書こうかなと思います。