DataTables で Responsive を有効にする際の注意事項

2020年1月12日2020年1月22日

先日、
「DataTables.js の Options 設定」
という記事にて
DataTables の
Responsive 拡張機能を有効にする
方法をご紹介したのですが、
設定如何で正しく表示されないので
注意事項を記します。

以下の DataTablesは
正常に Responsiveが
反映されるハズです。

Date	RBC level (10⁶/㎕)	Hgb level (g/dL)
Day 1	5.1	7.8
Day 2	4.9	7.4
Day 3	4.76	7.2
Day 4	4.49	6.7
Day 5	4.51	6.7
Day 6	3.82	5.4
Day 7	3.50	5.1

正しく表示されないと言うのは、
さまざまな画面サイズに合わせて
table layoutを最適化する
と言う Responsive本来の機能が
正常に働かないと言う事で、

具体的には一部の browserで
Desktop screen sizeの表示ではなく
mobile のデザインが表示されたり、
mobile 横向きでテーブルのサイズが
異常に小さく表示されると言った
現象が確認されます。

では、対処法はと言うと、
HTML table タグにあります。

Class

<table id="example" class="display responsive nowrap" width="100%">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

DataTable Option

$('#example').DataTable( {
    responsive: true
} );

<table id="example" class="display nowrap" width="100%">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

References from Initialisation

Responsive は
DefaultのJavascriptファイルと
CSSファイルでは動作しません。

Responsive を有効にするには
module を含めるか、
DataTables download builder で
カスタム DataTables パッケージに
差し替えます。

詳細は
以下の記事を参照してください。

Compatibility

次のWebブラウザーは、現在のリリースのDataTablesコアとその拡張機能によって完全にサポートされています。
DataTablesコアの次のメジャーバージョン（v1.11）はIE6-7をサポートしなくなることに注意してください
（すべての拡張機能で既にそうです）。

Chrome	Firefox	IE,Edge	Safari	Opera
Current and previous stable release versions.	Current Extended Support Release and all newer regular releases.	IE6-11, Edge. All extensions require IE8 or newer.	Safari v6 (Mac OS X v10.7 – Lion) and newer	Current and previous stable release versions.
現在および以前の安定 release versions。	現在の延長 Support Release 及び全ての新しい正規リリース。	IE6-11、Edge。すべての拡張機能にはIE8 以降が必要です。	Safari v6（Mac OS X v10.7-Lion）以降	現在および以前の安定 release versions。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました