2020年5月14日 現在リニューアル中です 各ページを修正しております。細かい部分レイアウト崩れ等ございますがご了承くださいませ。

Bootstrap4でDataTables実装手順

  • 2019年9月9日
  • 2019年9月9日
  • jQuery
  • 21view


今更感がありますが、業務でBootstrap4でDataTablesを実装したのですが、少し躓いたので備忘録的に書いておきますね。
ちなみにDataTablesやらTablesorterはHTMLのテーブルを見やすくるイケてるプラグインです。

 

 

使い方は簡単

公式サイト(https://datatables.net/)にかいてあるCDNを記載して、ターゲットのIDを指定するだけです。

記述はデモにありますが、こんな感じです。

HTMLの部分

Bootstrap4のフレームワーク

既にあるBootstrap4実装ずみだとテーブルがスタイルが変わるのでありがたく公式のCDNを仕様。

@See: https://datatables.net/extensions/fixedheader/examples/styling/bootstrap4.html

 

いい感じなりましたよ。

 

 

各種設定

躓いた点はプラグインの部分ですが、単純にPHPで回してテーブルを育成していたので公式通りなら別に間違えることはないのですが、一応記載しておきます。

各種設定は別ファイルに記載してもいいのですが、ページ内に書く場合は、

上記のようにそれぞれ記載していきます。

日本語化

言語変更は公式のTranslationsにあるJapaneseを参考に記載。

@See : https://datatables.net/plug-ins/i18n/Japanese

 

最後に

今回は躓いた理由は関数化して呼び出しテーブルのヘッダー部分が共通化していたのですが、1つのページにテーブルが多くなりIDが被るという単純なミスでした。

よくよく考えるとデータを見せるテーブルはそれぞれカラムも違うことが多いので強引な共通化はせず、面倒でも個別に見直すことします。

……と今は考えていますよ。

最新情報をチェックしよう!
>システム構築・保守に特化した会社です。

システム構築・保守に特化した会社です。

システムの構築・保守運用「システムガーディアン」 社内システム担当が欲しいが、専属で雇うほどの仕事量はない。 必要な時に必要なだけ頼りたいというお悩みを持つ企業様へ専門知識を持って対応を行っております。 サーバから各種システムまで自社・他社で構築されたシステムに対してサポートを行っております。

CTR IMG