【JavaScript】ソートできるテーブルを作る方法を解説します。

Javascript
スポンサーリンク

こんにちは朱夏です。

今回は、JavaScriptでソートできるテーブル(表)を作る方法を解説します。

朱夏
朱夏

テーブルだけなら作れるけど、ソートが出来るようにするにはどうしたらいいんだろう?

 

 

今回はJavaScriptのライブラリ「Datatables」を使って作っていきたいと思います。
Datatables」の使い方についても解説していきます。

それではいってみましょう。

 

[もくじ]
「Datatables」の紹介
テーブルの実装方法
あとがき

 

「Datatables」の紹介

今回使用するライブラリ「Datatables」を紹介します。
公式サイトはこちらになります。

 

トップページの「Full getting Started Guide」ボタンからスターターガイドが見れます。
英語なので翻訳してみると良いと思います。

 

 

テーブルの実装方法

テーブルの実装方法を解説していきます。
今回は例として、果物の種類と値段の一覧を作ってみます。

初めに上記で紹介した「Datatables」を導入します。

トップページにあるCSSとJavaScriptをHTMLから読み込みます。
コードはこちら。

<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
<script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>

 

<head>~</head>タグの間に上記のコード2行を追記します。

次に、テーブルを作ります。
テーブルにはJavaScriptを呼び出すためにidを付けておきます。

コードはこちら。

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>#</th>
            <th>名前</th>
            <th>価格</th>
            <th>備考</th>
        </tr>
    </thead>
    <tbody class="table-body">
        <tr>
            <td>1</td>
            <td>りんご</td>
            <td>100</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>バナナ</td>
            <td>120</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>みかん</td>
            <td>150</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>いちご</td>
            <td>500</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>キウイ</td>
            <td>100</td>
            <td></td>
        </tr>
        <tr>
            <td>6</td>
            <td>マスカット</td>
            <td>300</td>
            <td></td>
        </tr>
        <tr>
            <td>7</td>
            <td>スイカ</td>
            <td>1000</td>
            <td></td>
        </tr>
        <tr>
            <td>8</td>
            <td>メロン</td>
            <td>3000</td>
            <td></td>
        </tr>
        <tr>
            <td>9</td>
            <td>レモン</td>
            <td>120</td>
            <td></td>
        </tr>
        <tr>
            <td>10</td>
            <td>サクランボ</td>
            <td>500</td>
            <td></td>
        </tr>
        <tr>
            <td>11</td>
            <td>桃</td>
            <td>200</td>
            <td></td>
        </tr>
        <tr>
            <td>12</td>
            <td>梨</td>
            <td>150</td>
            <td></td>
        </tr>
</tbody>
</table>

 

 

これでテーブルの準備が出来ました。

最後に、テーブルにソート機能を付けていきます。JavaScriptに以下のコードを書いていきます。

jQuery(function($){
  $("#table_id").DataTable();
});

 

 

これで完成です。
CSSでテーブルが見やすいように枠や色を付けてています。

サンプルはこちら。

See the Pen
dyYzEPV
by 朱夏 (@syunatsu1)
on CodePen.

 

こんな感じです。
各項目のソートボタンで昇順、降順に並べ替える事が出来る様になりました。

 

 

あとがき

というわけで、JavaScriptのライブラリ「Datatables」を使ってソートが出来るテーブルを作ってみました。

今回のまとめはこちら。

  • CDNで「Datatables」を追加
  • idでHTMLからJavaScriptを呼び出す
  • JavaScriptにコードを書き込む

 

テーブルさえ作れれば実装は割と簡単にできるので、是非試してみてください。

今回は以上です。
次回もよろしくお願いします。

 

タイトルとURLをコピーしました