[Javascript-便利なスクリプト] テーブルにソート機能を簡単に追加 Table Sorter
Webアプリケーション開発をしていて、後からソート機能を追加しようと思うと、結構面倒なものですね。 その面倒をJavascriptで解決できないかと考えて探して見つけたのが、この「Table sorter」です。 この「Table sorter」を使えば、少しのコードを追加するだけで、簡単にテーブルにソート機能を付加できます。 使うか否より、まず デモ をご覧ください。
「Table sorter」のダウンロード
Download からFull releaseの物をダウンロードできます。 要らないものは、個々消してください。(私は実装時に殆ど消し、CSSの内容も位置も変えましたけど。) ダウンロードしたファイルは、今回はサンプルとして [site_root]/js/tablesorter/ に解凍するとします。
「Table sorter」の使い方
このスクリプトは設置がとても簡単です。 ・Table Sorterのスクリプトを読み込ませる ・ソート機能を適応させるテーブルにIDが割り当てられていない場合、IDを書き足す ・Tableタグにスタイルを適応させるためにクラスを書き足す ・ページ読み込み時に実行されるソート機能付加用のスクリプトを書き足す ・ヘッダ行を<thead>タグで囲っていない場合は書き足す ぐらいの作業じゃないでしょうか。 サンプルとして以下のHTMLソースを [site_root]/sort.html に作成してみます。
<html> <head> <title>Table Sorter</title> <link rel="stylesheet" type="text/css" href="js/tablesorter/themes/blue/style.css" /> <script type="text/javascript" src="js/tablesorter/jquery-latest.js"></script> <script type="text/javascript" src="js/tablesorter/jquery.tablesorter.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#SortTable").tablesorter(); } ); </script> </head> <body> <table id="SortTable" class="tablesorter"> <thead> <tr> <th>地区</th> <th>都道府県名</th> </tr> </thead> <tbody> <tr> <td>カンサイ</td> <td>オオサカ</td> </tr> <tr> <td>カンサイ</td> <td>キョウト</td> </tr> <tr> <td>カントウ</td> <td>トウキョウ</td> </tr> <tr> <td>カントウ</td> <td>チバ</td> </tr> </tbody> </table> </body> </html>
このソースで簡単なソートテーブルを表示できる事と思います。 ちなみに、データ行が1行も無い場合はエラーになるみたいなんで、動的にテーブルを生成する場合は、ダミー行を挿入するか、Tablesorterのコードを改変する必要有り。 ダミー行を挿入する場合は以下のような不可視の行をテーブルに含ませると良いでしょう。
<!-- <td />は列数と同じだけ作成する --> <tr style="display:none;"><td /><td /></tr>
また、Table sorterの Configuration を参照する事で、細かい設定も可能となっています。 以下、よく使うであろう設定をいくつかのサンプルを挙げておきます。
ソートさせたくない列を指定する
以下のように、<head>内で記述したJavascriptを以下のように変更すると、1列目のソート機能を無効にする事が可能です。 列数の指定は、1番左の列を0、2番目の列を指定する場合は1と指定します。
$("#SortTable").tablesorter({ headers: { 0: { sorter: false } // 1列目のソートを無効にする } });
また、複数列を無効にしたい場合は、以下のようにカンマ(,)区切りで記述する事で複数行のソートを無効化できます。
$("#SortTable").tablesorter({ headers: { 0: { sorter: false }, // 1列目のソートを無効にする 2: { sorter: false } // 3列目のソートを無効にする } });
数値としてソートするよう指定する
数値のソートを行いたい場合、デフォルトの設定のままでは文字列としてソートするために期待通りの結果が得られません。 数値としてソートを行いたい場合は、以下のように数値列を指定します。
$("#SortTable").tablesorter({ headers: { 0: { sorter: "digit" }, // 1列目を数値としてソートする 2: { sorter: "digit" } // 3列目を数値としてソートする } });
その他 技術情報
■カンマ付き数値のソート対応 Yahoo!知恵袋から引用。 質問者bokinaviさん、回答者spared_turkeyさんに感謝。
「jquery.tablesorter.js」の以下の記述を変更することにより、カンマ以下の数字もきれいにソートできるようになりました。備忘記録もかねて情報を残しておきます。 var i = parseFloat(s); ↓ var i = parseFloat(s.replace(/,/g,""));Yahoo!知恵袋 より引用
「Javascript」に関する「本」の商品を自動的に表示しています。
キーワードに関連していない商品は、Amazonがオススメする商品です。気になる物があればどうぞ。
キーワードに関連していない商品は、Amazonがオススメする商品です。気になる物があればどうぞ。
作成日:2008年05月25日(Sun) / 更新日:2010年11月08日(Mon)