表にソート機能を追加するプラグインの紹介

JavaScript

表にソート機能を追加するプラグインを紹介します。

「Tablesorter」を利用してソート機能を実装していきます。

デモページ

Tablesorterを利用するためにjQuery、を読み込む必要があります。
※1.x系を使用しましたが、1.x以外で動くかは試してないのでわかりません。

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

こちらから必要なファイルを取得します。
https://github.com/christianbach/tablesorter

必要なファイルは下記2つです。

jquery.tablesorter.min.js
jquery.metadata.js

今回はselectboxの選択値でソートを実装しました。
通常ではテーブルの見出しをクリックするとソートが出来ますが、
見た目上、cssの実装が必要なので省略しました。

selectのoptionのvalueにカンマ区切りでこのような形式

「列目, 昇順 = 0 or 降順 = 1」

で値を入れます。

<select class="sort">
    <option value="">選択してください</option>
    <option value="1,0">高さ: 昇順</option>
    <option value="1,1">高さ: 降順</option>
    <option value="2,0">幅: 昇順</option>
    <option value="2,1">幅: 降順</option>
    <option value="3,0">厚さ: 昇順</option>
    <option value="3,1">厚さ: 降順</option>
    <option value="4,0">重量: 昇順</option>
    <option value="4,1">重量: 降順</option>
</select>

ソートさせる場合は下記コードのように「tablesorter()」のオプションに「sortList」を指定する必要があります。

tablesorter({
    sortList: [ [0, 1] ]
});

このプラグインはobject内のデータ型は文字列でも問題ないようです。

tablesorter({
    sortList: [ ["0", "1"] ]
});

選択した値(this.value)をsplit()を利用して、配列に変換させます。

選択した値が空の場合、ソートを初期状態にします。
その場合は下記コードのように条件式を書きます。
また、selectboxが変更されたときにsortListに値をセットするため、$.on('change')を利用します。

$('.sort').on('change', function() {
    tablesorter({
        sortList: [ this.value ? this.value.split(',') : [0, 0] ]
    });
});

Tablesorterではtable内にtheadとtbodyが必須です。

<table>
    <thead>
        <tr>
            <th>高さ</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>158.2 mm</td>
        </tr>
    </tbody>
</table>

また、通常では文字列順のソートのため、数値をソートするときは下記が必要です。

sortValueの指定
sortValueを指定した見出しにmetadata指定
jquery.metadata.jsを追加で読み込む

今回は数値のサンプルなので、下記コードのように記述します。

<tr>
    <th class="{sorter:'metadata'}">高さ</th>
</tr>
<tr>
    <td class="{sortValue: 158.2}">158.2 mm</td>
</tr>

全体のコード

<select class="sort">
    <option value="">選択してください</option>
    <option value="1,0">高さ昇順</option>
    <option value="1,1">高さ降順</option>
    <option value="2,0">幅昇順</option>
    <option value="2,1">幅降順</option>
    <option value="3,0">厚さ昇順</option>
    <option value="3,1">厚さ降順</option>
    <option value="4,0">重量昇順</option>
    <option value="4,1">重量降順</option>
</select>
<table class="sort_table">
    <thead>
        <tr>
            <th>製品</th>
            <th class="{sorter:'metadata'}">高さ</th>
            <th class="{sorter:'metadata'}">幅</th>
            <th class="{sorter:'metadata'}">厚さ</th>
            <th class="{sorter:'metadata'}">重量</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Product 001</td>
            <td class="{sortValue: 158.2}">158.2 mm</td>
            <td class="{sortValue: 77.9}">77.9 mm</td>
            <td class="{sortValue: 7.3}">7.3 mm</td>
            <td class="{sortValue: 188}">188 g</td>
        </tr>
        <tr>
            <td>Product 002</td>
            <td class="{sortValue: 138.3}">138.3 mm</td>
            <td class="{sortValue: 67.1}">67.1 mm</td>
            <td class="{sortValue: 7.1}">7.1 mm</td>
            <td class="{sortValue: 138}">138 g</td>
        </tr>
    </tbody>
</table>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.metadata.js"></script>
<script src="jquery.tablesorter.min.js"></script>
<script>
    $('.sort_table').tablesorter(); //読み込み時
    $('.sort').on('change', function() {
        $('.sort_table').tablesorter({
            sortList: [ this.value ? this.value.split(',') : [0, 0] ]
        });
    });
</script>

Tablesorterは機能が豊富なので興味ある方はドキュメントを見てください。
以上です。

デモページ

参考リンク
Tablesorterのドキュメント「http://tablesorter.com/docs/」
github「https://github.com/christianbach/tablesorter」