HTMLのtableに様々な機能を追加できるプラグイン「DataTables」
2023.02.20 Posted by Coding_team
HTMLの表(table)にソートや検索機能を追加できるjQueryプラグイン「DataTables」をご紹介します。
このプラグインを使うと、tableに主に次のような機能を追加することができます。
- 件数を制限する機能
- ページング機能
- ソート機能
- 検索機能
- 件数表示
- 表が大きい場合にスクロールバーを追加する機能
例
下記のテーブルを例にDataTablesを適用していきます。
|
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 |
<table id="pref_table"> <thead> <tr> <th>都道府県</th> <th>人口</th> <th>面積</th> <th>人口密度</th> <th>全人口に対する割合</th> </tr> </thead> <tbody> <tr> <td>北海道</td> <td>5,352,000</td> <td>83,424</td> <td>64.1542</td> <td>4.216431</td> </tr> <tr> <td>青森県</td> <td>1,293,000</td> <td>9,646</td> <td>134.0452</td> <td>1.018656</td> </tr> <tr> <td>岩手県</td> <td>1,268,000</td> <td>15,275</td> <td>83.01146</td> <td>0.99896</td> </tr> <tr> <td>宮城県</td> <td>2,330,000</td> <td>7,282</td> <td>319.967</td> <td>1.835629</td> </tr> <tr> <td>秋田県</td> <td>1,010,000</td> <td>11,638</td> <td>86.78467</td> <td>0.795702</td> </tr> <tr> <td>山形県</td> <td>1,113,000</td> <td>9,323</td> <td>119.3822</td> <td>0.876847</td> </tr> <tr> <td>福島県</td> <td>1,901,000</td> <td>13,784</td> <td>137.9135</td> <td>1.497652</td> </tr> (省略) </tbody> </table> |
引用元 : 都道府県の人口一覧 – Wikipedia (https://ja.wikipedia.org/wiki/%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C%E3%81%AE%E4%BA%BA%E5%8F%A3%E4%B8%80%E8%A6%A7)
都道府県の面積一覧 – Wikipedia (https://ja.wikipedia.org/wiki/%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C%E3%81%AE%E9%9D%A2%E7%A9%8D%E4%B8%80%E8%A6%A7)
導入
CSSを読み込み
|
1 |
<link rel="stylesheet" href="//cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css"> |
JSを読み込み
|
1 |
<script src="//cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script> |
用意したテーブルにDataTableを適用します。
|
1 2 3 |
$(function(){ $('#pref_table').DataTable(); }); |
すると、テーブルに機能が追加されます。
DEMOはこちら
設定
日本語化
DataTableを実行する前に、日本語の設定を読み込みます。
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $.extend( $.fn.dataTable.defaults, { language: { url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" } }); $('#pref_table').DataTable(); }); |
DEMOはこちら
機能の無効化
デフォルトでは「件数制限」「ページング」「ソート」「検索」「件数表示」の5つの機能が追加されます。
不要な機能がある場合は、下記のように無効化します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function(){ $("#pref_table").DataTable({ // 件数制限機能 無効 lengthChange: false, // ページング機能 無効 paging: false, // ソート機能 無効 ordering: false, // 検索機能 無効 searching: false, // 件数表示 無効 info: false }); }); |
DEMOはこちら
スクロール
はみ出した部分をスクロールにすることができます。
下記のようにすると、Y方向高さが400pxに制限されスクロールされます。
|
1 2 3 4 5 |
$(function(){ $("#pref_table").DataTable({ scrollY: 400 }); }); |
DEMOはこちら
下記のようにすると、X方向にはみ出したらスクロールされます。
スマホで使えそうですね。
|
1 2 3 4 5 |
$(function(){ $("#pref_table").DataTable({ scrollX: true }); }); |
X方向にスクロールする場合、下記のようにtableにはwidth:100%と、white-space: nowrapを指定しましょう。
|
1 |
<table id="pref_table" style="width:100%; white-space: nowrap;"> |
DEMOはこちら
scrollYは値を入れますが、scrollXは真偽値を入れます。
HTML属性による設定
下記のように、HTML5のdata属性を使ってオプションを設定することもできます。
これは左から1列目(ゼロから数えて)の「人口」を昇順にし、1ページあたりの表示件数を10件に設定している例です。
|
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 |
<table id="pref_table" data-order='[[ 1, "asc" ]]' data-page-length='10'> <thead> <tr> <th>都道府県</th> <th>人口</th> <th>面積</th> <th>人口密度</th> <th>全人口に対する割合</th> </tr> </thead> <tbody> <tr> <td>北海道</td> <td>5,352,000</td> <td>83,424</td> <td>64.1542</td> <td>4.216431</td> </tr> <tr> <td>青森県</td> <td>1,293,000</td> <td>9,646</td> <td>134.0452</td> <td>1.018656</td> </tr> (省略) </tbody> </table> |
DEMOはこちら
この記事では代表的なものだけ紹介しましたが、他にも様々なオプションが用意されているので、活用してみてください。
参考
DataTablesの使い方 – Qiita (https://qiita.com/nissuk/items/7ac59af5de427c0585c5)
関連記事こちらの記事も合わせてどうぞ。
