テーブルにソート機能を追加するjQueryプラグインを紹介

2019年9月12日

今回は、お手軽にtableにソート機能を追加するjQueryプラグインをご紹介します。

いくつかテーブルソート系プラグインを試してみましたが、最もシンプルかつ最も汎用性に長けたプラグインだと思いますので、ソート機能を実装に悩んでいる方は是非チェックしてください。

テーブルにソート機能を追加するtablesorter.js

紹介したいプラグインは「tablesorter.js」。

下記のソースを貼りテーブルを指定するだけで、ソート機能を実装できます。

設定ファイルを自サーバーに入れてそれを読み込みたい方はダウンロードして運用してください。

ダウンロードファイルはこちら

また、デザイン用のcssスキンが存在しますが、今回は「既存のテーブルにソート機能を追加する」に絞って紹介します。

オススメポイント

他のソート系プラグインとは異なる、tablesorter.jsのオススメポイントを2つまとめました。

既存のデザインに影響を与えない（ようにできる）

テーブルソート系プラグインは、ソート用のアイコンを表示させるスキンも併せて導入する必要があります。

ソート方向を表示させるには、矢印が必要不可欠ですからね。

ただし、その矢印用のcssスキンを導入すると、既存のデザインが崩れてしまうことが多く、導入に難航していました。

tablesorter.jsは、ソートプログラム部分だけスクリプトで読み込み、css分は手動で書く（後述）ことで、既存のデザインに影響を与えず実装できます。

ソート機能だけ読み込み、矢印は自作cssで書いたものです。
デザインスキンは一切読み込まないことで、既存テーマのテーブルデザインを崩すことなく実装が可能です。

HTML側でソートの細かいオプションが設定できる

tablesorter.jsは、スクリプト側ではなく、HTMLタグからオプションを設定できます。

これにより、簡単にテーブル毎のソートの設定ができるようになります。

特にスクリプトと連携しにくい、Wordpressで運用しやすいのではないかと思っています。
実際にこの記事でもテーブルソートのデモを行っています。

当ブログはWordpressのCocoonテーマを使用していますが、Cocoonの導入方法についても最後に解説していますので是非ご確認ください。
（テーマ毎に設定ファイルは異なりますが、基本どのテーマでも使用できるはずです）

基本設定

tablesorter.jsのオススメ設定方法です。

公式のマニュアル通りのやり方ではありません。
個人的に最も汎用性が高いと感じた初期設定です。

事前にcssを設定する

まずは、以下のCSSを適用したいテーブルのページで読み込むようにしてください。

.tablesorter th{
    position: relative;
    cursor: pointer;
    text-align: left;
}
.tablesorter th::before, .tablesorter th::after{
    content: '';
    position: absolute;
    z-index: 2;
    right: 7px;
    width: 0;
    height: 0;
    border: 4px dashed;
    border-color: #333 transparent;
    pointer-events: none;
}
.tablesorter th::before{
    border-bottom-style: solid;
    border-top: none;
    top: 30%;
}
.tablesorter th::after{
    border-top-style: solid;
    border-bottom: none;
    bottom: 30%;
}
.tablesorter th.tablesorter-headerAsc:after{
    border: none;
}
.tablesorter th.tablesorter-headerAsc:before{
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.tablesorter th.tablesorter-headerDesc:before{
    border: none;
}
.tablesorter th.tablesorter-headerDesc:after{
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.tablesorter th.sorter-false:before, .tablesorter th.sorter-false:after{
    border: none;
}

このcssによって、tablesorter.jsのthタグにソートの矢印を表示させることができます。

スキンを読み込むと既存のテーブルレイアウトと変わってしまい、自サイトのテーブルレイアウトと雰囲気が合わなくなるケースが多いので、こちらの方法をご紹介とします。

スクリプトを書く

次に、テーブルソート機能を追加したいページでこのスクリプトを追加してください。

$(function(){
    $('.sort-table').tablesorter({
        textExtraction: function(node){
            var attr = $(node).attr('data-value');
            if(typeof attr !== 'undefined' && attr !== false){
                return attr;
            }
            return $(node).text();
        }
    });
});

ページ内のclassに「.sort-table」を持ったテーブルにソート機能を追加します。

ただ単にソート機能を追加したいだけなら$('.sort-table').tablesorter();だけでも良いのですが、textExtractionを設定しておくことで、表示とソート値を分けることが出来ます。（後述）

テーブルでソート機能の確認

ソート機能を付けたいテーブルにsort-tableクラスを追加し、テーブルタグを書きましょう。

先ほどのスクリプトタグによって、ソート機能が追加されるはずです。

注意点として、書かなくてもテーブルタグとして機能するtheadタグ(見出し)とtbodyタグ(内容)が、ソートを行う上で必ず必要なので、忘れないようにしてください。

サンプルコード
<table class="sort-table">
    <thead>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>生年月日</th>
            <th>成績</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>田中太郎</td>
            <td>8月12日</td>
            <td>95点</td>
        </tr>
        <tr>
            <td>2</td>
            <td>山田奈々</td>
            <td>3月7日</td>
            <td>100点</td>
        </tr>
        <tr>
            <td>3</td>
            <td>足立亮一</td>
            <td>11月23日</td>
            <td>70点</td>
        </tr>
        <tr>
            <td>4</td>
            <td>松森敬史</td>
            <td>6月13日</td>
            <td>90点</td>
        </tr>
        <tr>
            <td>5</td>
            <td>東川夏葉</td>
            <td>1月4日</td>
            <td>80点</td>
        </tr>
    </tbody>
</table>
番号 名前 生年月日 成績
1 田中太郎 8月12日 95点
2 山田奈々 3月7日 100点
3 足立亮一 11月23日 70点
4 松森敬史 6月13日 90点
5 東川夏葉 1月4日 80点

オプション設定

デフォルトでソートさせたいカラムを決める

テーブル毎に、最初の並び替えを決めることが出来ます。

<table class="sort-table" data-sortlist="[[3,1]]">

例えば初期ソートを成績の高い順にしたい場合は、table要素にdata-sortlistを付け、初期ソートを指定します。

[[3,1]]は、左から4列目（0から数えるため）のカラムの降順（大きい順）で最初はソートしろ、という指定です。
昇順（小さい順）の場合は0を指定ください。

番号 名前 生年月日 成績
1 田中太郎 8月12日 95点
2 山田奈々 3月7日 100点
3 足立亮一 11月23日 70点
4 松森敬史 6月13日 90点
5 東川夏葉 1月4日 80点

表記とは別のソート値を与えたい場合

例で挙げたテーブルで「名前」のソートを行った時、漢字扱いのソートなので正しく五十音順になりません。

このように、tdの中に書かれた表示と、ソートさせたい値を別にしたい場合がある時は、td要素にdata-valueにソート用の値を設定することが出来ます。

最初にスクリプトでtextExtraction～とごちゃごちゃ書いていたのは、data-value用の設定です。

サンプルコード
<table class="sort-table">
    <thead>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>生年月日</th>
            <th>成績</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td data-value="たなかたろう">田中太郎</td>
            <td>8月12日</td>
            <td>95点</td>
        </tr>
        <tr>
            <td>2</td>
            <td data-value="やまだなな">山田奈々</td>
            <td>3月7日</td>
            <td>100点</td>
        </tr>
        <tr>
            <td>3</td>
            <td data-value="あだちりょういち">足立亮一</td>
            <td>11月23日</td>
            <td>70点</td>
        </tr>
        <tr>
            <td>4</td>
            <td data-value="まつもりたかし">松森敬史</td>
            <td>6月13日</td>
            <td>90点</td>
        </tr>
        <tr>
            <td>5</td>
            <td data-value="ひがしかわなつは">東川夏葉</td>
            <td>1月4日</td>
            <td>80点</td>
        </tr>
    </tbody>
</table>
番号 名前 生年月日 成績
1 田中太郎 8月12日 95点
2 山田奈々 3月7日 100点
3 足立亮一 11月23日 70点
4 松森敬史 6月13日 90点
5 東川夏葉 1月4日 80点

名前のソートが50音順になっていることが分かります。

列ごとに並び替え方法を設定したい場合

列ごとに細かなオプションの設定もできます。

オプション 効果 設定例
data-sorter ソートが可能な列か true(有効)
false(無効)
data-sort-initial-order 最初にソートする方向 asc(昇順が先)
desc(降順が先)
data-lockedorder ソート方向を固定 asc(昇順に固定)
desc(降順に固定)

これらのオプションを試すため、先ほどのテーブルに、

  1. 「番号」のソートは降順に固定
  2. 「名前」のソートは無効
  3. 「成績」の最初のソートは降順

という設定を追加してみました。

サンプルコード
<table class="sort-table">
    <thead>
        <tr>
            <th data-lockedorder="desc">番号</th>
            <th data-sorter="false">名前</th>
            <th>生年月日</th>
            <th data-sort-initial-order="desc">成績</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td data-value="たなかたろう">田中太郎</td>
            <td>8月12日</td>
            <td>95点</td>
        </tr>
        <tr>
            <td>2</td>
            <td data-value="やまだなな">山田奈々</td>
            <td>3月7日</td>
            <td>100点</td>
        </tr>
        <tr>
            <td>3</td>
            <td data-value="あだちりょういち">足立亮一</td>
            <td>11月23日</td>
            <td>70点</td>
        </tr>
        <tr>
            <td>4</td>
            <td data-value="まつもりたかし">松森敬史</td>
            <td>6月13日</td>
            <td>90点</td>
        </tr>
        <tr>
            <td>5</td>
            <td data-value="ひがしかわなつは">東川夏葉</td>
            <td>1月4日</td>
            <td>80点</td>
        </tr>
    </tbody>
</table>
番号 名前 生年月日 成績
1 田中太郎 8月12日 95点
2 山田奈々 3月7日 100点
3 足立亮一 11月23日 70点
4 松森敬史 6月13日 90点
5 東川夏葉 1月4日 80点

WordPressのCocoonテーマで追加したい場合

ここから先はWordpressのCocoonテーマでソート機能を追加したい場合の設定の解説になります。

Cocoonの子テーマにある、

/tmp-user/footer-insert.php

に、先ほどのスクリプトファイルを追記します。

<?php
//フッター部分に解析タグを挿入したいときはこのテンプレートに挿入
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
?>
<?php if (!is_user_administrator()) :
//管理者を除外してカウントする場合は以下に挿入 ?>

<?php endif; ?>
<?php //全ての訪問者をカウントする場合は以下に挿入 ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script>
<script>
$(function(){
    $('.sort-table').tablesorter({
        textExtraction: function(node){
            var attr = $(node).attr('data-value');
            if(typeof attr !== 'undefined' && attr !== false){
                return attr;
            }
            return $(node).text();
        }
    });
});
</script>

後は記事の編集画面で、テーブルタグに<table class="sort-table">としっかりクラス指定を行うことでテーブルにソート機能が追加されます。

各テーマ毎に、スクリプトタグを書くべきファイルが異なるので、今回は当ブログでも使用しているCocoonの紹介としました。

他テーマの場合は、スクリプトタグを書くべき場所に追記してください。

tablesorter.jsはシンプルかつオプションが豊富で使いやすいので、様々な場面で活躍できると思います。

テーブルにソート機能が必要な場合にオススメのプラグインです。

以上、テーブルにソート機能を追加するjQueryプラグインを紹介、でした。

jQuery