本記事は執筆時点(2022年03月11日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
DataTablesとは?
DataTablesは、HTMLで作成した表(table)にページ送りや絞り込み検索などの機能を簡単に実装することができるjQueryのライブラリです。
こういった表に関する機能は、通常であれば時間を掛けてプログラミングして作り込まなければできませんが、ライブラリを利用することで即座に導入することが可能です。
公式サイトはこちら
DataTables | Table plug-in for jQueryDataTablesを導入すると、HTMLで作った表(テーブル)に次のような機能を簡単に実装することができます。
プレビュー
DataTablesの導入方法
それでは、DataTablesをサイトに読み込ませてテーブルに機能を実装する手順を説明していきます。
CDNで読み込む
DataTabelsは、公式サイトにCDNが用意されています。
トップページにある「CSS」と「Javascript」の両方のCDNをコピーして自身のサイトの<head></head>の中などに貼り付けてください。
なお、DataTabelsはjQueryを使用したライブラリになりますので、必ずjQueryより後に読み込ませるようにしてください。
CDN
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"> <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
記述の仕方
CDNでDataTablesの読み込みが完了したら、HTMLで表(テーブル)を作成しjQueryでDataTablesの機能を有効化させます。
HTMLでtableを作成する
まずは元となる表をHTMLのtableタグを使って作成します。
この時、theadとtbodyを記述して表を作るようにしてください。これらを使わずに表を作るとページ送りや絞り込みといったDataTablesの機能が表示されないので注意が必要です。
また、作成した表にはidもしくはクラスを付与しておいて下さい。DataTablesを有効にする際にセレクターとして使います。
HTML
<table id="target"> <thead><th>ID</th><th>都道府県</th><th>ふりがな</th></thead> <tbody> <tr><th>1</th><td>北海道</td><td>ほっかいどう</td></tr> <tr><th>2</th><td>青森県</td><td>あおもりけん</td></tr> <tr><th>3</th><td>岩手県</td><td>いわてけん</td></tr> -省略- <tr><th>45</th><td>宮崎県</td><td>みやざきけん</td></tr> <tr><th>46</th><td>鹿児島県</td><td>かごしまけん</td></tr> <tr><th>47</th><td>沖縄県</td><td>おきなわけん</td></tr> </tbody> </table>
DataTablesを有効化する
HTML側で元となるtableの用意ができたら、jQueryでDataTablesを有効化します。
テーブルに付与したidもしくはクラスをセレクターにしてtableを指定して下記のように記述します。
jQuery
$(document).ready(function(){ $("#target").DataTable(); });
以上でDataTabelsの実装は完了です。しかし、この時点ではDataTablesの各機能の表記は英語になっており、表のデザインも枠線や色がついていない状態ですので調整していきます。
DataTablesを日本語化する
公式サイトに用意されている翻訳データを読み込んでDataTablesの各機能の表記を日本語に変更します。
日本語を含めた多言語翻訳データは、公式サイトのこちらのページに記載されていますので参考にしてください。
https://datatables.net/plug-ins/i18n/※現時点で日本語への翻訳は全て完了していないようです。そのため一部の機能では英語表記のままになっています。
DataTablesの翻訳データをCDNで読み込む
公式サイトから取得するCDNは以下のようになっています。
CDN
https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json
翻訳データはjQueryのDataTablesのオプションとして追記して読み込みます。
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{ url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", } }); });
CSSでスタイルを調整する
デフォルトでは色がついていない状態です。(別途スタイルシートを読み込んでいたり、ワードプレスのテーマを使っている場合には、そのスタイルが適用されている可能性もあります。)
ここでは、例として次のようなスタイルを記述しました。
CSS
/*表全体*/ .dataTable{ border:solid 1px #999; } /*表のヘッダー*/ .dataTable thead,.dataTable thead th{ background-color: #999 !important; color:#fff; border-bottom:none; margin-top: 5px; } .dataTable thead th{ border:solid 1px #e9e9e9; } table.dataTable thead .sorting{/*ソートの矢印*/ background-image: url(https://cdn.datatables.net/1.11.5/images/sort_both.png) !important; } /*表*/ .dataTable tbody tr:nth-child(odd) th,.dataTable tbody tr:nth-child(odd) td{/*行を交互に色分け*/ background: #d9d9d9; } .dataTable tbody th,.dataTable tbody td{ border:solid 1px #e9e9e9; } /*件数など*/ .dataTables_length,.dataTables_filter{ margin-bottom:5px; }
セレクターにoddを使うことで、行を交互に色分けすることができます。
CSSのセレクターについて詳しくはこちら
CSSのセレクターの種類と使い方
CSSのセレクタ―は、スタイルを適用させたいHTML要素の特定に使います。セレクタ―を使ってスタイルを指定することで、同じスタイルを使いまわしたり一部分にだけ違うスタイルを適用させることが可能になります...【もっと読む】
日本語表記への切替とスタイルの調整ができたら、以下のようなDataTablesを使った表が完成します。
プレビュー
DataTablesの機能
上記で完成した表をもとにDataTabelsで標準的に使用できる機能について説明していきます。
各機能はjQueryでオプションとして下記のように追記することで有効と無効を切り替えることが可能です。falseで無効化し、有効化したい時はtrueにするか記述を削除します。
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{//日本語化 url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", }, ordering:false,//並び替え searching:false,//絞り込み検索 paging:false,//ページ送り(無効化すると表示件数も停止する) lengthChange:false,//表示件数 info:false,//総件数 });//end datatables });//end ready
並び替え(ソート)機能
HTMLのtableのtheadで作った部分には矢印ボタンが表示され、クリックするたびに表の中身を昇降順に並び替えることができます。
矢印は各列に表示され、列ごとの基準で並び替えが行われます。
表示件数切替機能
「10」「25」「50」「100」の中から1ページに表示するデータの行数を選択できます。表示件数が変わると自動的にページ送りのボタンの数も切り替わります。
ページ送り機能
選択されている表示件数に応じてページ数が切り替わり、ボタンが表示されます。
絞り込み検索機能
指定の文字列が含まれているデータのみを表示することができます。
総件数表示機能
データの総件数とページ送りによって現在何件目のデータを表示しているかを確認することができます。
DataTablesのオプションの使い方
前述の機能の有効化無効化の切替を含め、DataTablesは用意されているオプションを設定することで細かなカスタマイズを行うことが可能です。
DataTablesのオプションの詳細は、公式サイトのこちらのページを参照してください。
https://datatables.net/reference/option/列の幅を変更する
テーブルの列の幅はcolumnsオプションを使って変更できます。
下記のように列ごとにwidthで幅を指定していきます。nullを記述した列は自動で幅が調整されます。
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{//日本語化 url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", }, "columns":[//列の幅を変更する {"width":"10%"},//1列目 {"width":"70%"},//2列目 null,//3列目 ], });//end datatables });//end ready
プレビュー
他にもcolumnDefsを使って列ごとに幅を指定する方法があります。詳しくは公式サイトのページをご確認下さい。
https://datatables.net/reference/option/columns.widthスクロールバーを表示する
オプションを設定すれば、スマホなどウインドウサイズ小さい場合でも縦長や横長の表が見やすいようにスクロールバーを表示することができます。
縦スクロールバーを表示する
縦スクロールバーは、「scrollY」オプションに高さを指定すれば使用できます。
なお、表示件数の切替によっては行数が少なくなり指定した高さを満たさないことがあります。そうした状況で発生させたくない場合は「scrollCollapse」も有効化させておきましょう。
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{//日本語化 url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", }, scrollY:"300px", scrollCollapse:true,//データ行数が少ない場合に調整する });
プレビュー
横スクロールバーを表示する
横スクロールバーは、「scrollX」オプションをtrueにして有効化すれば使用できます。
ただし、あらかじめ列の幅をピクセルで指定しておかないと正しく表示されないので注意が必要です。幅を指定していなかったり、%で指定した状態で有効化すると横スクロールバーも表示されず、レイアウトも崩れてしまいます。
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{//日本語化 url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", }, columns:[ {"width":"300"}, {"width":"500"}, {"width":"500"} ], scrollX:true, });
プレビュー
オプションに両方追記すれば、縦と横両方のスクロールバーを表示することも可能です。
DataTablesの拡張機能の使い方
DataTablesにはオプションだけでなく拡張機能も存在し、さらに高度な機能を使うことができます。
前述のオプションとは異なり、拡張機能を使うためには別のCDNを読み込ませる必要があります。
拡張機能ページで使いたい拡張機能にチェックを入れて、ページの一番下のCDNをコピーしてください。あとは最初と同じように読み込ませれば完了です。
公式サイトの拡張機能の選択ページはこちら
https://datatables.net/download/あとはjQueryで拡張機能を追記して有効化させれば使用することができます。
ここでは便利な拡張機能をいくつか紹介します。
オートフィル
オートフィル機能を有効にすると、エクセルのようにセルをドラッグしてコピーすることができるようになります。
各セルにカーソルを合わせると右下に青い四角マークが表示されるのでドラッグします。
なお、元のHTMLが書き換わるわけではありません。
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{//日本語化 url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", }, autoFill:true,//オートフィル });
プレビュー
ヘッダーを固定する
fixedHeader機能を有効にすると縦にスクロールした時にtheadの部分(1行目)が固定されるようになります。
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{//日本語化 url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", }, fixedHeader:true,//テーブルヘッダーを固定 });
プレビュー
列を固定する
fixedColumn機能を有効化すると横にスクロールした時に列が固定されるようになります。
なお、列を固定させる為には横スクロールも有効にしておく必要があります。また、セルの背景色が指定されていないと重なって表示されてしまうので注意してください。
CSS
.dataTable tbody tr:nth-child(odd) .dtfc-fixed-left{ background: #d9d9d9; } .dataTable tbody tr:nth-child(even) .dtfc-fixed-left{ background: #fff; }
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{//日本語化 url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", }, fixedColumns:true,//カラムを固定 });
プレビュー
列を指定して固定する
上記では自動的に左端の列が固定されましたが、任意の列を指定して固定表示させることも可能です。
左から数えて何番目の列を固定させるかを指定します。
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{//日本語化 url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", }, fixedColumns:{ left:3, },//左から3番目のカラムを固定 });
出力ボタンを追加する
ボタン機能を有効化すると表のデータをクリップボードにコピーするボタンや、PDF化・エクセルファイル化・CSV化してダウンロードするボタン、印刷ボタンを設置することができます。
※日本語のデータはPDF化すると文字化けするのでご注意下さい。
jQuery
$(document).ready(function(){ $("#target").DataTable({ "language":{//日本語化 url:"https://cdn.datatables.net/plug-ins/1.11.5/i18n/ja.json", }, dom:"lBfrtip",//ボタン表示用 buttons:[//ボタンの種類(PDFはデフォルトでは日本語は文字化けする) 'copy','pdf','csv','excel','print', ], });
プレビュー
その他の拡張機能の詳しい説明は公式サイトの拡張機能ページをご確認下さい
https://datatables.net/extensions/indexまとめ
DataTablesにはソートや各種ファイル形式での出力などWEBサービスを作るときに役立つ機能が豊富に備わっています。これだけの機能を自作するとなるとかなりの労力を要しますので表(テーブル)を使う際は導入してみてはいかがでしょうか?