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

2017年4月14日2020年6月28日

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ステップで終わります。

tablesorterのjsとcssファイルを読み込む。
ソートしたいテーブルに、idとclassを指定。
ページ読み込み終了時に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

←

→

jQuery最高の教科書

株式会社シフトブレイン (著)
SBクリエイティブ
価格￥2,576(2025/05/18 12:15時点)
Amazonで口コミ・レビューを見る

Amazonで探す楽天で探す Yahooで探す