JQueryで綺麗なテーブルを作れるのがDataTablesです。
DataTablesの使い方は以下にまとめました。
ところで、DataTablesで縦方向にスクロールしようとして、scrollYを指定すると、ヘッダーthのサイズに問題が発生しました。
いろいろやってみてなんとか解決したのでメモしました。
scrollYを指定して発生した問題
以下のように
DataTablesを使ってテーブルを作成して、
scrollYとscrollCollaplseを指定したとします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
table1 = $('#table1').DataTable({ searching: false, paging: false, ordering: false, info: false, scrollY: 360, scrollCollapse: true, bAutoWidth: false, aoColumns: [ {sWidth: '10%'}, {sWidth: '18%'}, {sWidth: '16%'}, {sWidth: '7%'}, {sWidth: '10%'}, {sWidth: '10%'}, {sWidth: '29%'} ] }); |
これを表示すると以下のように表示されます。
ちょっとボヤけて見えにくいですか？
以下の4個の問題点があります。
- ヘッダー部分 th の幅が、他の行 tr の幅と合わない。
- Windowサイズをリサイズしてもヘッダー部分 th の幅が、他の行 tr の幅と合わない。
- ヘッダー部分 th のpaddingが効かない。デフォルトの top:10px right:18px bottom:10px left:18px のままで変更できない。
- タブペインでは、すべてのペインのヘッダー部分 th の幅が、他の行 tr の幅と合わない。
調べてみると同じような現象を発見しました。
DataTables fixed headers misaligned with columns in wide tables
jQuery Datatables Header Misaligned With Vertical Scrolling
解決策がいろいろと書いてあるので、一つ一つ試してみます。
よく書いてあったのが以下の解決策です。
|
1 2 3 4 |
setTimeout(function () { table1.fnAdjustColumnSizing(); }, 10 ); |
要は「0.01秒ほど時間を置いて、fnAdjustColumnSizing()を呼び出せ」ってことです。
試してみます。
|
1 |
Uncaught TypeError: table1.fnAdjustColumnSizing is not a function |
うーん、どういう訳か関数を認識していません。
次に見つけたのが、以下の解決策です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
table1 = $('#table1').DataTable({ searching: false, paging: false, ordering: false, info: false, scrollY: 360, scrollCollapse: true, bAutoWidth: false, aoColumns: [ {sWidth: '10%'}, {sWidth: '18%'}, {sWidth: '16%'}, {sWidth: '7%'}, {sWidth: '10%'}, {sWidth: '10%'}, {sWidth: '29%'} ] }).columns.adjust(); |
これは、DataTablesを作成するタイミングで、columns.adjust()を呼び出すっていう方法です。
試してみますが、うまくいきません。
あとは、
Responsiveというプラグイン
や
FixedHeaderというプラグイン
を試してみる方法もあるようなのですが、うまくいきません。
scrollYでヘッダーthの幅がおかしくなった場合の修正方法
最初の2個の問題
- ヘッダー部分 th の幅が、他の行 tr の幅と合わない。
- Windowサイズをリサイズしてもヘッダー部分 th の幅が、他の行 tr の幅と合わない。
については、以下のようにJavaScriptで記述すると解決しました。
|
1 2 3 |
$(window).resize(function() { table1.columns.adjust().draw(); }); |
次に3個目の問題
- ヘッダー部分 th のpaddingが効かない。デフォルトの top:10px right:18px bottom:10px left:18px のままで変更できない。
については、以下のようにCSSで記述すると解決しました。
|
1 2 3 4 |
table.dataTable thead th, table.dataTable thead td { padding: 4px 4px; border-bottom: 1px solid #111; } |
要は、デフォルトのDataTablesのpaddingの設定を変更します。
次に4個目の問題
- タブペインでは、すべてのペインのヘッダー部分 th の幅が、他の行 tr の幅と合わない。
については、以下のようにJavaScriptで記述すると解決しました。
|
1 2 3 |
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { table1.columns.adjust().draw(); }); |
以上ですが、お役に立てれば幸いです。
プログラミングの無料レッスン体験
約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp
＜Codecampの特徴＞
1 現役エンジニアによる指導
2オンラインでのマンツーマン形式の講義
3大手企業にも導入されている実践的なカリキュラム
↓無料体験レッスン実施中です。
コメント