jQueryのDataTablesでscrollYを指定するとヘッダーthのサイズがおかしい

JQueryで綺麗なテーブルを作れるのがDataTablesです。

DataTablesの使い方は以下にまとめました。

日本語対応jQuery DataTablesのfixedColumnsを使って、Excelのウィンドウ枠風(Freeze Panes)の表を作る

JavaScriptで表を作るならjQueryのDataTablesがとにかく便利です。これを使うようになってからまともに、th,tr,tdなどを使って表を作らなくなりました。今回、日本語対応jQuery DataTable...

ところで、DataTablesで縦方向にスクロールしようとして、scrollYを指定すると、ヘッダーthのサイズに問題が発生しました。

いろいろやってみてなんとか解決したのでメモしました。

scrollYを指定して発生した問題
scrollYでヘッダーthの幅がおかしくなった場合の修正方法
プログラミングの無料レッスン体験

scrollYを指定して発生した問題

以下のように

DataTablesを使ってテーブルを作成して、

scrollYとscrollCollaplseを指定したとします。

 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%'}
        ]
    });

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: '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

解決策がいろいろと書いてあるので、一つ一つ試してみます。

よく書いてあったのが以下の解決策です。

 setTimeout(function ()
  {
    table1.fnAdjustColumnSizing();
  }, 10 );

setTimeout(function ()

{

table1.fnAdjustColumnSizing();

}, 10 );

要は「0.01秒ほど時間を置いて、fnAdjustColumnSizing()を呼び出せ」ってことです。

試してみます。

Uncaught TypeError: table1.fnAdjustColumnSizing is not a function

1	Uncaught TypeError: table1.fnAdjustColumnSizing is not a function

うーん、どういう訳か関数を認識していません。

次に見つけたのが、以下の解決策です。

 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();

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: '29%'}

]

}).columns.adjust();

これは、DataTablesを作成するタイミングで、columns.adjust()を呼び出すっていう方法です。

試してみますが、うまくいきません。

あとは、

Responsiveというプラグイン

Responsive

や

FixedHeaderというプラグイン

FixedHeader

を試してみる方法もあるようなのですが、うまくいきません。

scrollYでヘッダーthの幅がおかしくなった場合の修正方法

最初の2個の問題

ヘッダー部分 th の幅が、他の行 tr の幅と合わない。
Windowサイズをリサイズしてもヘッダー部分 th の幅が、他の行 tr の幅と合わない。

については、以下のようにJavaScriptで記述すると解決しました。

$(window).resize(function() {
    table1.columns.adjust().draw();
});

$(window).resize(function() {

table1.columns.adjust().draw();

});

次に3個目の問題

ヘッダー部分 th のpaddingが効かない。デフォルトの top:10px right:18px bottom:10px left:18px のままで変更できない。

については、以下のようにCSSで記述すると解決しました。

    table.dataTable thead th, table.dataTable thead td {
        padding: 4px 4px;
        border-bottom: 1px solid #111;
    }

table.dataTable thead th, table.dataTable thead td {

padding: 4px 4px;

border-bottom: 1px solid #111;

}

要は、デフォルトのDataTablesのpaddingの設定を変更します。

次に4個目の問題

タブペインでは、すべてのペインのヘッダー部分 th の幅が、他の行 tr の幅と合わない。

については、以下のようにJavaScriptで記述すると解決しました。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    table1.columns.adjust().draw();
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

table1.columns.adjust().draw();

});

以上ですが、お役に立てれば幸いです。

プログラミングの無料レッスン体験

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

＜Codecampの特徴＞

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp