第6章　「テーブルソート処理」

jQuery UIにはテーブルをソートするためのメソッドも用意されています。一般的にテーブルの内容をソートするためのライブラリはいくつかあります (Yahoo UI Libraryにもあります)。また、サーバー側でソートして結果を出力する場合もあります。 jQueryの場合、テーブルタグに対してtablesorter()を指定するだけで自動的にソート機能が追加されます。多分、これ以上簡単なものはないでしょう。テーブルタグにクラス名などを指定する必要もありません。
サンプル1は最もシンプルなテーブルソートの例です。テーブルヘッダーをクリックすると昇順、降順が切り替わります。 （サンプル1を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.tablesorter.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQuery UIの処理</p>
<table border="1" id="myTable">
<thead>
<tr><th>番号</th><th>名前</th><th>年齢</th></tr>
</thead>
<tbody>
<tr><td>5</td><td>森</td><td>22</td></tr>
<tr><td>1</td><td>高橋</td><td>49</td></tr>
<tr><td>2</td><td>佐藤</td><td>35</td></tr>
<tr><td>3</td><td>山田</td><td>29</td></tr>
<tr><td>4</td><td>佐々木</td><td>62</td></tr>
</tbody>
</table>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
$(function(){
$("#myTable").tablesorter();
});


サンプル1はちょっと見栄えがよくありませんが、jQuery UIでは標準でテーブルソート用のスタイルシートが用意されています。サンプル2では用意されているスタイルシートを読み込ませています。
また、あらかじめ特定の列をソートして表示することができます。この場合にはtablesorter()のオプションパラメータにsortListを指定し、ソート対象にする列番号と昇順/降順かを指定します。列番号は0から開始番号になるので一番左側の列が0、その右側の列が1になります。昇順/降順は0または1で指定します。0を指定すると昇順、1を指定すると降順になります。これらのパラメータを配列形式で指定することになります。
サンプル2では最初から番号を降順にして表示するようにしています。（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/flora/flora.all.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.tablesorter.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>jQuery UIの処理</p>
<table border="1" id="myTable" class="tablesorter">
<thead>
<tr><th>番号</th><th>名前</th><th>年齢</th></tr>
</thead>
<tbody>
<tr><td>5</td><td>森</td><td>22</td></tr>
<tr><td>1</td><td>高橋</td><td>49</td></tr>
<tr><td>2</td><td>佐藤</td><td>35</td></tr>
<tr><td>3</td><td>山田</td><td>29</td></tr>
<tr><td>4</td><td>佐々木</td><td>62</td></tr>
</tbody>
</table>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
$(function(){
$("#myTable").tablesorter({ sortList:[[0,1]] });
});

[目次へ]