DataTables で Responsive を有効にする際の注意事項
この記事は約 4 分で読めます。
先日、
「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 パッケージに
差し替えます。
詳細は
以下の記事を参照してください。
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。 |
最後まで
ご高覧いただきまして
有難うございました
