new   6日前に投稿

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

この記事は約 3 分で読めます。

4.5

先日、
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 横向きでテーブルのサイズが
異常に小さく表示されると言った
現象が確認されます。

PC画面でモバイルデザインが表示されている

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

HTML table class の場合でも、
DataTable Option の場合でも
HTML table に必ず
width="100%"
class="nowrap"
を書く事が重要となります。

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

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

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
DataTables で Responsive を有効にする際の注意事項