こんにちは朱夏です。
今回は、JavaScriptでソートできるテーブル（表）を作る方法を解説します。
テーブルだけなら作れるけど、ソートが出来るようにするにはどうしたらいいんだろう？
今回はJavaScriptのライブラリ「Datatables」を使って作っていきたいと思います。
「Datatables」の使い方についても解説していきます。
それではいってみましょう。
「Datatables」の紹介
テーブルの実装方法
あとがき
「Datatables」の紹介
今回使用するライブラリ「Datatables」を紹介します。
公式サイトはこちらになります。
トップページの「Full getting Started Guide」ボタンからスターターガイドが見れます。
英語なので翻訳してみると良いと思います。
テーブルの実装方法
テーブルの実装方法を解説していきます。
今回は例として、果物の種類と値段の一覧を作ってみます。
初めに上記で紹介した「Datatables」を導入します。
トップページにあるCSSとJavaScriptをHTMLから読み込みます。
コードはこちら。
|
1 2 |
<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を付けておきます。
コードはこちら。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<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に以下のコードを書いていきます。
|
1 2 3 |
jQuery(function($){ $("#table_id").DataTable(); }); |
これで完成です。
CSSでテーブルが見やすいように枠や色を付けてています。
サンプルはこちら。
See the Pen
dyYzEPV by 朱夏 (@syunatsu1)
on CodePen.
こんな感じです。
各項目のソートボタンで昇順、降順に並べ替える事が出来る様になりました。
あとがき
というわけで、JavaScriptのライブラリ「Datatables」を使ってソートが出来るテーブルを作ってみました。
今回のまとめはこちら。
- CDNで「Datatables」を追加
- idでHTMLからJavaScriptを呼び出す
- JavaScriptにコードを書き込む
テーブルさえ作れれば実装は割と簡単にできるので、是非試してみてください。
今回は以上です。
次回もよろしくお願いします。
