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

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

概要

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

 

導入すると、次のテーブルのように、見出しをクリックすることでインタラクティブにソートできるようになります。

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氏が2013年ごろに公開したものですが、最近はメンテナンスされておらず、公式ページも消滅しました。

 

2018年11月現在では、Rob Garrison氏が非公式forkし開発を続けています。

ドキュメントが整備され、様々な機能追加もされており、cdnjsにも登録されています。

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

 

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

導入手順

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

  1. tablesorterのjsとcssファイルを読み込む。
  2. ソートしたいテーブルに、idとclassを指定。
  3. ページ読み込み終了時にtablesorterを実行するように設定。

また、テーブルの見出し行は<thead>、本体行は<tbody>タグで囲まれているようにしてください。

手順詳細

ここでは、cdnを利用する方法を紹介します。

jsとcssファイルを読み込む

まず、テーブルソートしたいページで、jQuery.jsとtablesorter.js、tablesorterのテーマcssファイルを読み込みます。

 

例えば<head>タグ内で次のように記述します。

jQueryを既にロードしている場合は、jQueryの後にjquery.tablesorter.jsをロードするように追加してください。

(2018/11現在のバージョンですので、cdnjsを参照して適宜更新してください。テーマファイルも、cdnから好きなものを選ぶと良いでしょう。)

<!--<head>内-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.default.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>
<!-- 追加機能(widgets)を使用する場合は次も追加する -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.widgets.min.js"></script>

idとclassを指定

次にソートしたいテーブルのタグに適当なid名とclass=”tablesorter”を指定します。

<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Chiyu</td>
      <td>12<td>
    </tr>
    ...
  </tbody>
</table>

class名をテーブル指定するのは、cssファイルのstyleを当てるためです。

ページ読み込み終了時にtablesorterを実行するように設定。

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

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

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

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

 

初期状態からソートしたい場合には、引数にsortListオプションを追加します。

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

ここで、[n, m]の意味は次のとおりです。

  • n: 0始まりの列番号
  • m: 0昇順, 1降順

[n, m]を複数指定すると、複数項目でソートします。

上の例では、1列目を昇順でソートし、第2ソート列として2列目を昇順でソートします。

オプション

テーマの指定

テーマ一覧はここにあります

テーマ指定をするには次のようにします。

  • theme.default.cssの代わりに、対応するcssファイルを読み込むようにする
  • <table class=”tablesorter”>のクラス指定部分に、tablesorter-{テーマ名}を追加する

 

例えば、blueテーマなら<head>内で次のcssを読み込むようにして、

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.blue.min.css">

テーブルは、

<table class="tablesorter tablesorter-blue">

とするだけです。

 

class名は、”tablesorter”のままで、tablesorterを実行するときに次のようにテーマ名を指定する方法もあります。

$(function() {
  $("#myTable").tablesorter({
    theme: 'blue'  
   });
});

オプションでthemeを渡すと、javascriptで同様にclass=”tablesorter-blue”が追加されます。

 

まとめ

htmlテーブルに項目別のソート機能を簡単に導入することのできる jQueryプラグインtablesorter.jsの導入方法を紹介しました。

簡単に導入でき、ユーザエクスペリエンスが向上が期待できますので、是非試してみてください。

リンク

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

 

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

コメント

  1. J より:

    公式ページをクリックすると、ウィルスが検知されます…。

    1. beiz より:

      公式ページがなくなったようですね。ご連絡ありがとうございます。

コメントを残す