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

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

DISCLAIMER: This article is more than a year old and may not be current.

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

では、対処法はと言うと、
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.js の Options 設定

DataTables はHTML のテーブルに、ページ切り替え、ページ当たりの件数設定、ソート、キーワード検索な ...

https://neco913.kirara.st/post-10902/

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。