htmlページのテーブルに、項目欄でソートする機能を簡単に導入することができる tablesorter.js の紹介をします。
目次
概要
tablesorterは、htmlテーブルにソート機能を追加するjQueryプラグインです。
導入すると、次のテーブルのように、見出しをクリックすることでインタラクティブにソートできるようになります。
Last Name | First Name | 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
- 株式会社シフトブレイン (著)
- SBクリエイティブ
- 価格¥2,838(2024/10/11 04:07時点)
- Amazonで口コミ・レビューを見る
公式ページをクリックすると、ウィルスが検知されます…。
公式ページがなくなったようですね。ご連絡ありがとうございます。