Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

shinataka
ダメなエンジニアです。ゆるゆると好きにやってみたことを書いてみます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした