IDCF テックブログ

IDCF テックブログ

クラウド・データセンターを提供するIDCフロンティアの公式テックブログ

datatablesをbootstrap4ベースで利用してみた

CDN javascript IDCFクラウド

こんにちは。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本家サイト に書いてあるとおりに宣言します。

header部分
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

jsの宣言は </body> の手前に。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="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の後にそれぞれ追加してください。

header部分（cssの宣言）
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
bodyの最後(jsの宣言)
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

datatablesの日本語化

全ての宣言を終えたらちょっとだけカスタマイズします。

日本語化(jsの宣言の後に追加)
<script>
    $(function(){
        // datatableの設定を変更
        $("#table1").DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Japanese.json"
            }
        });
    });
</script>

table属性を記述する。

上記全てが完了したらtableタグを書きます。

tableタグ(bodyの中に記述)
        <table id="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じゃないバージョンの宣言をコピペします。

変更前
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

↓

変更後
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

おぉ、できた！！

f:id:tshinagawa:20171205190443j:plain

完成

完成形のソースは次のとおりです。そのままコピペして頂ければローカル環境でも見られると思います。

datatable.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datatebles site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <!--  datatables css -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
</head>
<body>

<div class="container">

    <div class="col-xs-12">
        <table id="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 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<!--  datatables js -->
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="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は高機能なので色々とカスタマイズしてみると良いと思います。

Copyright © IDC Frontier Inc.