テーブルにソート機能を追加するtablesorter.jsを簡単導入する方法

  • このエントリーをはてなブックマークに追加
  • Pocket

htmlページのテーブルに、項目欄でソートする機能を簡単に導入することができる tablesorter.js の紹介をします。

概要

tablesorterは、テーブルに次のようなソート機能を追加するjQueryプラグインです。

画像は公式ページに掲載されているデモです。公式ページでは実際の動作を確認することができます。

導入手順

導入はとても簡単、3ステップで終わります。

  1. <script>タグで jQueryとダウンロードしてきたtablesorterの2つを読み込む。
  2. ソートしたいテーブルにid名を設定。
  3. ページ読み込み終了時にtablesorterを実行するように設定。

またソートしたいテーブルは、<thead><tbody>タグで作成されていることを確認してください。

手順詳細

tablesorter公式からFull Release (jquery.tablesorter.zip)をダウンロードして解凍します。

その中に含まれるjquery.tablesorter.min.js をクライアントが読み込める場所へアップロードします。

テーブルソートしたいページ中で、jQueryとtablesorterを読み込みます。例えば次のように記述します。jQueryを既にロードしている場合は、jquery.tablesorter.min.jsのみロードすればよいです。

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.min.js"></script>

ソートしたいテーブルにid名を設定します。

<table id="foobar">

 

ページの読み込み終了時に tablesorterを実行します。例えば、手順1の<script>タグ以降に次のように記述します。

$(document).ready(function() 
    { 
        $("#foobar").tablesorter(); 
    } 
);

 

これで、項目欄名をクリックすることで、テーブルがソートされるようになります。

シフトを押しながら複数項目をクリックすることで、複数項目でソートすることもできます。

オプション

以上の導入で、最小限の機能が導入できます。

このままでは、現在どの項目でソートされているかわかりにくいですので、公式のデモにあるように、ソートしている項目欄に「▲」「▼」などのアイコンが表示されるようにしましょう。これも簡単にできます。

先程ダウンロードしたファイルのなかに、アイコン画像が含まれています。次のファイルをimgフォルダなどにアップロードしましょう。

  • themes/blue/bg.gif
  • themes/blue/asc.gif
  • themes/blue/desc.gif

次に、スタイルシートに次の記述を追加します。

th.header { 
    background-image: url(/path/to/img/bg.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
}
th.headerSortUp { 
    background-image: url(/path/to/img/asc.gif); 
}
th.headerSortDown { 
    background-image: url(/path/to/img/desc.gif); 
}

以上で、項目名に「▲」アイコンが表示され、どの項目でソートされているか見てわかるようになります。

(headerSortUpなどのclass名は tablesorter.jsによって自動で付加されるため、このようにcssの記述だけで済みます。)

まとめ

htmlテーブルに項目別のソート機能を簡単に導入することのできる jQueryプラグインtablesorter.jsの導入方法を紹介しました。簡単に導入でき、ユーザエクスペリエンスが向上が期待できますので、是非試してみてください。

公式

tablesorter.js http://tablesorter.com/docs/

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す