DataTablesの使い方
DataTablesは、表の見栄えを綺麗にしたり、ソートや検索が使えるようになるjQueryのプラグインです。
本ページでは、DataTablesの使い方を説明します。
DataTablesとは
DataTablesは、表を綺麗に見せるだけでなく、ABC順などでソートしたり、単語にマッチした行だけ表示する検索などの機能を持ったプラグインです。
以下の例では、左上のShow部分の数字を変更することで、一度に表示する行数を変更できます。また、ヘッダー部分をクリックするとその列の昇順、もう1度クリックすると降順にソートします。Search部分に文字を入力すると、マッチした行だけ表示されます。
会社 | 商品 | 価格 | 送料 |
---|---|---|---|
A社 | テント | 20,000 | 5,000 |
A社 | ランタン | 10,000 | 2,000 |
A社 | タープ | 10,000 | 2,000 |
A社 | テーブル | 5000 | 1,000 |
B社 | テント | 30,000 | 1,000 |
B社 | ランタン | 12,000 | 1,000 |
B社 | タープ | 12,200 | 900 |
B社 | テーブル | 900 | 200 |
C社 | テント | 30,000 | 3,000 |
C社 | ランタン | 1,500 | 1,500 |
C社 | タープ | 7,500 | 500 |
C社 | テーブル | 1,700 | 600 |
D社 | テント | 10,000 | 1000 |
D社 | ランタン | 2,000 | 200 |
D社 | タープ | 3,300 | 230 |
D社 | テーブル | 2,300 | 210 |
E社 | ランタン | 2,000 | 400 |
E社 | グランドシート | 2,000 | 240 |
DataTablesは、MIT Lisenceというライセンスを採用していて、自由にダウンロードして無料で利用できます。
DataTablesのダウンロードと導入
DataTablesは、「DataTables」でダウンロードできます。表示されたページで、「Download」を選択するとオプションなどが選択できるページになりますが、オプションは選択しなくても動作します。
ページの一番下で、さらに「Download」をクリックした後、「Download files」をクリックするとファイルがダウンロードできます。
ダウンロードしたファイルは、圧縮されているため解凍が必要です。解凍後は、DataTablesフォルダができるため、フォルダごとサーバーにアップロードします。
アップロードした後、「jQueryの利用」でプラグインを利用できるようになっている場合は、HTMLのhead要素内に以下の記述を追加してファイルを読み込ませます。
<link rel="stylesheet" href="DataTables/datatables.min.css"> <script src="DataTables/datatables.min.js"></script> <script> $(document).ready(function(){ $('#myTable').DataTable(); }); </script>
赤字部分は、アップロードしたDataTablesのCSSファイルとJavaScriptです。ディレクトリを作ってアップロードした場合は、アップロードしたディレクトリに合わせて修正してください。
その下は、DataTablesを使うための最低限のスクリプトです。
HTMLのbody内で、以下のように表を挿入すると、記述した部分に表が表示されます。
<table class="display" id="myTable"> <thead> <tr> <th>会社</th> <th>商品</th> <th>価格</th> <th>送料</th> </tr> </thead> <tbody> <tr> <td>A社</td> <td>テント</td> <td>20,000</td> <td>5,000</td> </tr> ・・・以下同じ </tbody> </table>
表の作り方については、「HTMLに表を挿入して装飾する」をご参照下さい。
DataTablesのオプション
以下のようにデータをすべて表示し、左上の行数変更、右下の「Next」や「Previous」、左下の何ページ目かなどのインフォメーション表示を無効にすることもできます。
会社 | 商品 | 価格 | 送料 |
---|---|---|---|
A社 | テント | 20,000 | 5,000 |
A社 | ランタン | 10,000 | 2,000 |
A社 | タープ | 10,000 | 2,000 |
A社 | テーブル | 5000 | 1,000 |
B社 | テント | 30,000 | 1,000 |
B社 | ランタン | 12,000 | 1,000 |
B社 | タープ | 12,200 | 900 |
B社 | テーブル | 900 | 200 |
C社 | テント | 30,000 | 3,000 |
C社 | ランタン | 1,500 | 1,500 |
C社 | タープ | 7,500 | 500 |
C社 | テーブル | 1,700 | 600 |
D社 | テント | 10,000 | 1000 |
D社 | ランタン | 2,000 | 200 |
D社 | タープ | 3,300 | 230 |
D社 | テーブル | 2,300 | 210 |
E社 | ランタン | 2,000 | 400 |
E社 | グランドシート | 2,000 | 240 |
指定は、オプションで行います。以下は、オプションの例です。
オプション | 説明 | デフォルト |
---|---|---|
paging | falseにすると全データが表示されて、ページ切替が表示されなくなります。 | true |
lengthChange | falseにすると左上のShowが表示されません。 | true |
searching | falseにすると検索ボックスが表示されません。 | true |
ordering | flaseにするとヘッダーをクリックしてもソートできません。 | true |
info | falseにすると左下のインフォメーションが表示されません。 | true |
order | ページが表示された時にソートする列を指定します。 | [[0, 'asc']] |
オプションは、スクリプトに追加して記述します。複数オプションを指定する場合は、カンマ(,)で区切って記述します。例で示した表では、以下赤字部分のようにオプションを追加しています。
<script>
$(document).ready(function(){
$('#myTable').dataTable( {
paging: false,
lengthChange: false,
searching: true,
ordering: true,
info: false
} );
} );
</script>
ソートや検索は有効にし、ページ切替が不要なように全データを表示するようにしています。また、左下に表示される何ページ目かなどのインフォメーションも無効にしています。
orderは、以下のように[[1, 'asc']]と指定すると2列目をソートして初期表示します。
<script>
$(document).ready(function(){
$('#myTable').dataTable( {
order: [[1, 'asc']]
} );
} );
</script>
赤字部分は、0が1列目、1が2列目のソートを示します。
デフォルトは、1列目でソートされます。ソートしたくない場合は、order: []と指定します。
複数個所での利用
DataTablesを1ページで2箇所以上で利用する場合、スクリプトを以下赤字部分のように書き換えて追加します。
<script>
$(document).ready(function(){
$('#myTable2').dataTable( {
paging: false,
lengthChange: false,
searching: false,
ordering: false,
info: false
} );
} );
</script>
上記は、検索やソートなどのオプションも無効にしていますが、利用する機能に合わせて設定を変更してください。
また、2箇所目のtable要素では以下のように記述します。
<table class="display" id="myTable2">
赤字部分を合わせることで、スクリプトと表が対応付けられます。
このため、オプションを変えて1ページ内に異なる動作をする複数の表が作成できます。
ホームページ作成「表のレスポンシブ対応」