web-dev-qa-db-ja.com

datatable jquery-テーブルヘッダーの幅が本体の幅に合わない

JQueryデータテーブルを使用しています。アプリケーションを実行するとき、ヘッダーの幅は本体の幅に合わせられません。しかし、ヘッダーをクリックすると、ボディの幅に合わせて調整されますが、それでも多少の調整不良があります。この問題はIEでのみ発生します。

JSFiddle

これは、ページがロードされたときの外観です。

enter image description here

ヘッダーをクリックした後：

enter image description here

私のデータテーブルコード：

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});

ratesは私のテーブルIDです。
これを手伝ってくれる人はいますか？前もって感謝します。

jquerydatatablesalignment
54
kishore

ソリューションが見つかりました：

テーブルにtable-layout:fixedを追加しました。そして、IEモードでアプリケーションを開きました。

18
kishore

原因

ほとんどの場合、テーブルは最初は非表示になっており、jQuery DataTablesが列幅を計算できなくなります。

解決

  • テーブルが折りたたみ可能な要素にある場合、折りたたみ可能な要素が表示されたときにヘッダーを調整する必要があります。

    たとえば、Bootstrap Collapseプラグインの場合：

    $('#myCollapsible').on('shown.bs.collapse', function () {
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

  • テーブルがタブにある場合、タブが表示されるようになったらヘッダーを調整する必要があります。

    たとえば、Bootstrap Tabプラグインの場合：

    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
});

上記のコードは、ページ上のすべてのテーブルの列幅を調整します。詳細については、 columns().adjust() APIメソッドを参照してください。

応答性、スクローラーOR FIXEDCOLUMNS拡張

Responsive、Scroller、またはFixedColumns拡張機能を使用している場合は、追加のAPIメソッドを使用してこの問題を解決する必要があります。

リンク集

テーブルが最初に非表示になったときのjQuery DataTablesの列に関する最も一般的な問題の解決策については、 jQuery DataTables – Bootstrap tabs の列幅の問題を参照してください。

48
Gyrocode.com

「dataTable」テーブルをdivとoverflow:autoでラップすることにより、この問題を解決しました。

.dataTables_scroll
{
    overflow:auto;
}

dataTable初期化後にこのJSを追加します。

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

sScrollXまたはsScrollYを使用しないでください。それらを削除して、同じことを行うdivラッパーを自分で追加してください。

44
Sharjeel Ahmed

修正しました、Work for me。

var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

または

var table = $('#example').DataTable();
table.columns.adjust().draw();

リファレンス： https://datatables.net/reference/api/columns.adjust（）

6
bamossza

上記の解決策はどれもうまくいきませんでしたが、最終的には解決する解決策を見つけました。

この問題の私のバージョンは、「box-sizing」を異なる値に設定するサードパーティのCSSファイルが原因で発生しました。以下のコードで他の要素に影響を与えずに問題を修正できました。

    $table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");

これが誰かを助けることを願っています！

4
Strucker
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
        "bSortable": false
    },
    null,
    null,
    null,
    null
]}).fnAdjustColumnSizing( false );

データテーブル呼び出しの最後にfnAdjustColumSizing（false）を呼び出してみてください。上記の変更されたコード。

列のサイズの問題に関する議論

3
Mike Ramsey

テーブルの幅が100％であることを確認してください

次に、「autoWidth」：true

2
RAS

Mike Ramseyからの回答をリンクすることで、最終的にDOMがロードされる前にテーブルが初期化されていることがわかりました。

これを修正するために、初期化関数を次の場所に配置しました。

document.addEventListener('DOMContentLoaded', function() {
    InitTables();
}, false);
1
Martin O Leary

オーバーフロー自動と相対位置を使用して、divでテーブルタグ要素をラップするだけです。 chromeおよびIE8で動作します。データをリロードした後でもテーブルサイズを固定するために、高さ400pxを追加しました。

table = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>').appendTo('#candidati').dataTable({
        //"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW
        //"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW
        "sAjaxSource": "datass.php",
        "aoColumns": colf,
        "bJQueryUI": true,
        "sPaginationType": "two_button",
        "bProcessing": true,
        "bJQueryUI":true,
        "bPaginate": true,
        "table-layout": "fixed",
        "fnServerData": function(sSource, aoData, fnCallback, oSettings) {
            aoData.Push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filtri
            oSettings.jqXHR = $.ajax({
                "dataType": 'JSON',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
            $(nRow).click(function() {
                $(".row_selected").removeClass("row_selected");
                $(this).addClass("row_selected");
                //mostra il detaglio
                showDetail(aData.CandidateID);
            });
        },
        "fnDrawCallback": function(oSettings) {

        },
        "aaSorting": [[1, 'asc']]
}).wrap("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header
1
alexroat

上記のソリューションはどれも役に立たなかったので、ソリューションを投稿します。テーブルを非表示のdivにロードし、テーブルの作成後にdivを表示していました。最初にdivを表示/非表示にしてから、テーブルが表示されている間にテーブルを作成すると、機能しました。

そのため、DataTablesは非表示のdivで列のサイズを変更できません。これは、おそらくテーブルが非表示のときにバックエンドで列幅が0pxになるためです。

1
Bryce Chamberlain

Gyrocode.comが言ったように、「テーブルは最初は隠されている可能性が高いため、jQuery DataTablesは列幅を計算できません。」

私もこの問題を抱えていて、divを表示した後にdataTableを初期化するだけで解決しました

例えば

$('#my_div').show();
$('#my_table').DataTable();
1
Luis Alberto Corzo

ヘッダーのいくつかの単純なcssがこれを行う必要があります。

#rates_info, #rates_paginate
{
    float: left;
    width: 100%;
    text-align: center;
}

私はあなたのhtmlを見ていないので、これがうまくいくと約束することはできませんが、試してみてください。

0
chockleyc

私は同じ問題に直面していました。 dataTableにscrollX：trueプロパティを追加し、機能しました。データテーブルのCSSを変更する必要はありません

jQuery('#myTable').DataTable({
                            "fixedHeader":true,
                            "scrollY":"450px",
                            "scrollX":true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false,
                            "searching": false,
                            "scrollCollapse": true
                            });
0
Jibran

問題は、データテーブルがDOMに描画される前にデータテーブルが呼び出されることです。データテーブルを呼び出す前にタイムアウトを設定してください。

setTimeout(function(){ 
    var table = $('#exampleSummary').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);
0
vinaya kumar

残念ながら、これらのソリューションはどれも私にとってはうまくいきませんでした。おそらく、テーブルの初期化の違いにより、結果は異なります。これらのソリューションのいずれかが誰かのために機能する可能性があります。とにかく、誰かがまだこの問題に悩んでいる場合に備えて、私の解決策を共有したかった。しかし、少しハックされていますが、後でテーブルの幅を変更しないので、私にとってはうまくいきます。

ページをロードし、ヘッダーをクリックして展開し、正常に表示されるようにした後、テーブルヘッダーを調べて.dataTables_scrollHeadInner divの幅を記録します。私の場合は、たとえば715pxです。次に、その幅をcssに追加します。

.dataTables_scrollHeadInner
{
  width: 715px !important;
}
0
Alexander

Gyrocode.comの問題に対する答えは完全に正しいものでしたが、彼のソリューションはすべての場合に機能するとは限りません。より一般的なアプローチは、document.ready関数の外部に次を追加することです。

$(document).on( 'init.dt', function ( e, settings ) {
    var api = new $.fn.dataTable.Api( settings );
    window.setTimeout(function () {
            api.table().columns.adjust().draw();
        },1);
} );
0
Rosue Walford

私の解決策はこれを追加することでした：...

initComplete () {
      this.api (). columns (). header (). each ((el, i) => {
          $ (el) .attr ('style', 'min-width: 160px;')
      });
},

...

そしてそれはうまく見えます。

0
Rafael Andrs Cspedes Basterio

これらのコマンドを使用します

$('#rates').DataTable({
        "scrollX": true,
        "sScrollXInner": "100%",
    });
0
Hamza Khan

コンテナテーブルの固定幅を追加

JS：

otableCorreo = $("#indexTablaEnvios").DataTable({                
    "fnInitComplete": function (oSettings, json) {
        $(otableCorreo.table().container()).addClass("tablaChildren");
    },
});

CSS：

.tablaChildren {
    width: 97%;
}
0
Dani

私はこれが古いことを知っていますが、私は単に問題にぶつかり、素晴らしい解決策を見つけられませんでした。そこで、テーブルの高さと比較して、いくつかのjsを使用してscrollBodyの高さを取得することにしました。 scrollBodyがテーブルよりも小さい場合、スクロールバーを考慮してテーブルの幅を15px増やします。コンテナのサイズが変更されたときに機能するように、サイズ変更イベントでもこれを設定しました：

const tableHeight = $('#' + this.options.id).height();
const scrollBodyHeight = $('#' + this.options.id).closest('.dataTables_scrollBody').height();

if (tableHeight > scrollBodyHeight) {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "calc(100% + 15px)",
    })
} else {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "100%",
    })
}
0
stevenlacerda

同様の問題がありました。展開可能/折りたたみ可能なパネルにテーブルを作成します。テーブルが表示されていれば問題ありません。しかし、パネルを折りたたんでブラウザのサイズを変更してから展開すると、問題はそこにありました。この関数がパネルを展開するたびに、パネルヘッダーのクリック関数に次を配置することで修正しました。

            // recalculate column widths, because they aren't recalculated when the table is hidden'
            $('.homeTable').DataTable()
                .columns.adjust()
                .responsive.recalc();
0
Scott

これを使用：モーダル名を置き換え、データテーブルをクリアしてロードします

$('#modalCandidateAssessmentDetail').on('shown.bs.modal', function (e) {

});
0
Joseph Stalin

$（ '。DataTables_sort_wrapper'）。trigger（ "click"）;

0
Victor Villacorta

ページのスクリプトに追加します。

$( window ).resize(function() {
    var table = $('#tableId').DataTable();
    $('#container').css( 'display', 'block' );
    table.columns.adjust().draw();
});
0
Dimas Lazuardy

このソリューション を参照してください。これは、ウィンドウスクロールイベントが1回だけ発生することで解決できます。

0
Alexandre Pires

さまざまな松葉杖を考え出す必要はありません。テーブルヘッダーの幅は本文と一致していません。テーブルにデータを入力するのに十分な時間がなかったため、setTimeoutを実行してください。

   setTimeout(function() {
     //your datatable code 
  }, 1000);
0
frontend33