今更感がありますが、業務で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が被るという単純なミスでした。

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

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

カトー
この記事を書いた人:カトー

一応会社の代表。
WEB系からシーケンサまでITの汎用型エンジニア。
第二次ベービーブーム世代 北関東生まれ、MSX育ち。