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

2020年1月12日

先日、
「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 パッケージに
差し替えます。

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

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