1ヶ月前に投稿

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

2020年1月22日

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

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

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

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