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

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

概要

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

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

2018/05追記

私のこのサイトでも導入してみました。

Last Name First Name Email Due Web Site
Smith John jsmith@gmail.com $50.00 http://www.jsmith.com
Bach Frank fbach@yahoo.com $50.00 http://www.frank.com
Doe Jason jdoe@hotmail.com $100.00 http://www.jdoe.com
Conway Tim tconway@earthlink.net $50.00 http://www.timconway.com

元々はChristian Bach氏が4年ほど前に公開したものですが、最近はメンテナンスされていません。

今から導入するのでしたら、Rob Garrison氏が非公式forkしている次のバージョンを導入するのがおすすめです。ドキュメントが整備され、機能向上もされており、cdnjsにも登録されています。基本的な使用方法は同じです。

https://mottie.github.io/tablesorter/docs/index.html

 

WordPressに導入したい方は、新規プラグイン追加で「tablesorter」で検索すると、Christian Bach氏のtablesorterをコピーしたプラグインが見つかります。原作者名を示していないのはどうかと思いますが、一応使えます。(私のこのサイトでは、これではなくRob Garrison氏版を自分でプラグイン化したものを使用しています。)

導入手順

導入はとても簡単、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/

非公式fork: https://mottie.github.io/tablesorter/docs/index.html

 

 こんな記事も読まれています  

コメントを残す