こんにちは。UX開発部 ディベロップメントグループの品川と申します。
IDCFクラウドのサービス立ち上げ期から、主にフロントエンド（たまにバックエンド）を担当してます。
htmlでtable表記をする際になにかと便利なのがdatatablesですよね。IDCFクラウドのサービスサイト内でも頻繁に実装されているjqueryの追加ライブラリですが、最近、サイト内のリファクタリングを進めることになりまして、今いろいろな箇所を見直しています。
見直しの際、せっかくだからBootstrap4をベースに使ってみようと思い 元サイトを見てみたら bootstrap4 用のcssとjsが用意されているじゃありませんか！！こんな便利なのに、より使いやすくなるなんて！これはもう記事にするしかなし！！！
ということで、今回はdatatablesをbootstrap4ベースで利用してみようというお話です。実質 15分程度でステキな高機能テーブルができました。が、少しだけハマったところがあったので注意点も含めてまとめたいと思います。
前提
- 全ての外部ファイル(CSS,JS)は CDNを利用する。
- スタイルやデザインは一切いじらない。
- datatablesのロケールは日本語にする。(datatablesのプラグイン設定を使う。)
- jqueryは 3.2.1を使用する。(ちゃんとdatatablesの手前で宣言しておいてね。)
DataTablesってなに？
一応datatables知らないよって人のために簡単にdatatablesの機能を簡単にまとめてみます。
一言でいうとtableにポピュラーな機能を付加してくれるステキなjqueryの拡張機能です。
- tableタグそのものに手を加える必要がない。
- jqueryのID指定
#("table").datatable();をするだけで次の機能が付加される。 - 自動的に付加される機能
- ページネーション
- 表示件数の変更
- カラムソート
- 部分検索
ということで実際に実装してみましょう。
bootstrap4、jQuery3の宣言
2017/11時点ではまだbeta版ですが気にせず使っていきましょう。
bootstrap本家サイトに書いてあるとおりに宣言します。
<linkrel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"crossorigin="anonymous">jsの宣言は </body>の手前に。
<scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"crossorigin="anonymous"></script>datatablesの宣言
準備が整ったので、datatablesの宣言をします。
datatablesのサイトにアクセスし、CDNのページに遷移します。
bootstrap4のトグルボタンを押下して選択したら、その下にあるRelease部分のソースをコピペします。
※宣言はbootstrap4,jQuery3の後にそれぞれ追加してください。
<linkrel="stylesheet"href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/><scriptsrc="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script><scriptsrc="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>datatablesの日本語化
全ての宣言を終えたらちょっとだけカスタマイズします。
<script>$(function(){// datatableの設定を変更$("#table1").DataTable({"language":{"url":"//cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json"}});});</script>table属性を記述する。
上記全てが完了したらtableタグを書きます。
<tableid="table1"class="table table-bordered"><thead><tr><th>No</th><th>氏名</th><th>メールアドレス</th></tr></thead><tbody><tr><td>1</td><td>ほげほげ太郎</td><td>hogehoge@example.com</td></tr><tr><td>2</td><td>ほげふが次郎</td><td>hogefuga@example.com</td></tr></tbody></table>ハマった点
これでもう完成！と思いブラウザで表示させてみたら・・・あれ？テーブル表示以外何にも出ない・・・
デバッガツールのコンソールを見てみたら次のエラーが。TypeError: $.ajax is not a function
ajaxなんて使ってないのに・・・と思ったのですが、datatablesはajaxでデータのやり取りをする機能がデフォルトでついているので、jQueryの初期化で怒られてました。
何かいけないのか調べていたところ、jqueryの宣言を見ると・・・jquery-3.2.1.slim.min.js
ん？ slim？
minは良いとしてslimってなんぞ？？
ググってみたところ、このslimっていうのは余分なjQueryの機能をそぎ落としてパフォーマンスを向上させている版でajax部分の記述がどうやらなくなっているらしいです。
参考にさせて頂いたサイト
TypeError: $.ajax is not a function エラーが出た時の対策(jQuery 3.x)
ということで、改めてjQueryCDNのサイトからslimじゃないバージョンの宣言をコピペします。
<scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script>↓
<scriptsrc="//code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>おぉ、できた！！
完成
完成形のソースは次のとおりです。そのままコピペして頂ければローカル環境でも見られると思います。
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>datatebles site</title><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Latest compiled and minified CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"crossorigin="anonymous"><!-- datatables css --><linkrel="stylesheet"href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/></head><body><divclass="container"><divclass="col-xs-12"><tableid="table1"class="table table-bordered"><thead><tr><th>No</th><th>氏名</th><th>メールアドレス</th></tr></thead><tbody><tr><td>1</td><td>ほげほげ太郎</td><td>hogehoge@example.com</td></tr><tr><td>2</td><td>ほげふが次郎</td><td>hogefuga@example.com</td></tr></tbody></table></div></div><!-- jQuery first, then Popper.js, then Bootstrap JS --><scriptsrc="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"crossorigin="anonymous"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"crossorigin="anonymous"></script><!-- datatables js --><scriptsrc="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script><scriptsrc="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script><script>$(function(){// datatableの設定を変更$("#table1").DataTable({"language":{"url":"//cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json"}});});</script></body></html>以上です。
html1枚ペラで15分程度でこのクオリティ！
もちろんこの後はajaxでバックエンドと通信したり、実際のレコード部分はレスポンスデータを流し込んだりしますが、ガワを爆速で用意できるのは素晴らしいですね。
datatablesは高機能なので色々とカスタマイズしてみると良いと思います。