【JavaScript】HTMLの表にソート機能を追加する方法

サンプルデモ

Web上の表にソート機能を追加します。デモは以下のようになります。

ソート機能はjQueryとTablesorterというJavaScriptを使っています。 次項で詳しく解説しますが、やることは大体コピペでいけるので非常に簡単です。5分程度あればできるでしょう。

Tablesorterの使い方

やることは以下の3ステップです。

ではやってみましょう。

Headタグに必要ファイルを読み込む

まずはjsファイルとcssファイルを読み込みます。headタグ内に以下の3行を追記してください。

<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.2/js/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/css/theme.default.min.css">

1行目はjQuery本体、2行目はTablesorterのjsファイルです。 それぞれVerは執筆時のものなので、最新のVerがでたら更新すると良いでしょう(多少古くても動くと思いますが)。

既にheadタグ内でjQueryを読み込んでいる場合は1行目は不要ですが、2行目はソート機能本体なので必須です。 3行目はTablesorterのcssファイルなので、これも必須です。

tableタグにid名とクラス名を追加する

次に、tableタグに「任意のid名」と「tablesorterクラス」を追加します。例えば以下のようになります。

    <table id="testTbl" class="tablesorter" >
        <tr>
            <td>テスト１</td>
            <td>テスト２</td>
            <td>テスト３</td>
        </tr>  
    </table>

id名は何でも良いのでここでは「testTbl」にしました。クラス名は任意ではなく「tablesorter」にして下さい。

scriptタグにコードを追加する

最後に、HTMLファイルにJavaScriptのコードを追記します。追記する場所はJavaScriptが動けばどこでも良いのですが、 bodyタグを閉じる直前に記載するのがページ表示速度的に良いでしょう。

<script type="text/javascript">
        $(document).ready(function() 
            { 
                $("#testTbl").tablesorter(); 
            } 
        );            
</script>

4行目の「testTbl」の部分はtableタグに任意でつけたid名が入るので、それと合わせるように変更してください。

以上でソート機能が実現されるはずです。また、Tablesorterにはいくつかテーマがあり、それを使うとよりスタイリッシュな表にできます。 これは次項から解説していきます。

このままで良い、または見た目は自力で何とかする場合は必要ありません。

テーマを使って見栄えを良くする方法

ソート機能だけなら前項までで実現できていますが、このままではシンプル極まりないので見栄えを何とかします。 Tablesorterには複数のテーマが用意されているのでそれを利用します。

用意されているテーマは以下となります。

では、表をスタイリッシュに変更してみましょう。やることは以下の2つです。

現時点の状態から上記の2点だけを変更します。変更は一部なので1分程度で終わるでしょう。では、詳しく解説します。

読み込んでいるcssファイルを変更する

まずは、head内に読み込んでいるcssファイルのアドレス「default」部分を変更したいテーマ名に変更します。

例えば、テーマ「blackice」に変更したい場合は以下のようにします。変更するのは末尾のほうにある一部だけです。

(変更前)  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/css/theme.default.min.css">
(変更後)  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/css/theme.blackice.min.css">

後ろのほうにある「default」が「blackice」になっているのがわかるかと思います。別のテーマにしたい場合は好きなテーマ名にして下さい。 なお、テーマ名はテーマ一覧にある()内の名前を使います。

tableタグのクラス名を変更する

次に、tableタグに追加したtablesorterクラスをテーマあったクラス名に変更します。変更したいテーマ名は「blackice」なので以下のようになります。

(変更前) <table id="testTbl" class="tablesorter" >
(変更後) <table id="testTbl" class="tablesorter-blackice" >

ご覧のとおり、tablesorterに「ハイフン＋テーマ名」を追記するだけです。以上でテーマの変更は完了です。お疲れ様でした。