LoginSignup
10
13

More than 5 years have passed since last update.

@shinataka

bootstrap4のスタイルをベースにdatatablesを爆速で利用してみた(CDN利用)

Last updated at Posted at 2017-11-08

htmlでtable表記をする際になにかと便利なのがdatatablesですよね。
少し前に某サイトで利用する目的で実装したのですが、最近また別件で実装する機会があったので
せっかくだから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>

おぉ、できた！！

完成

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

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

<!--  datatables 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>

<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は高機能なので色々とカスタマイズしてみると良いと思います。

10
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
13