87

jQuery データテーブルを使用しています。アプリケーションを実行すると、ヘッダーの幅が本文の幅と一致しません。しかし、ヘッダーをクリックすると、本文の幅に合わせて配置されますが、それでも多少のずれがあります。この問題は IE でのみ発生します。

JSFiddle

ページが読み込まれると、次のようになります。

ここに画像の説明を入力

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

ここに画像の説明を入力

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

$("#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です。
誰でもこれで私を助けることができますか？前もって感謝します。

4

34 に答える 34

83

原因

ほとんどの場合、最初はテーブルが非表示になっているため、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 メソッドを参照してください。

レスポンシブ、スクローラー、または固定列の拡張機能

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

リンク

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

于 2017-09-11T16:54:01.817 に答える
4

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

この問題の私のバージョンは、'box-sizing' を別の値に設定したサードパーティの CSS ファイルが原因でした。以下のコードを使用して、他の要素に影響を与えることなく問題を修正できました。

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

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

于 2015-03-29T18:17:11.143 に答える
3 
$("#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) を datatables 呼び出しの最後に呼び出してみてください。上記の変更されたコード。

列のサイズ変更に関するディスカッション

于 2013-06-21T14:45:49.247 に答える
0

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

于 2016-05-17T15:20:02.847 に答える
0

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

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

あなたのhtmlを見たことがないので、これがそのまま機能するとは約束できませんが、試してみてください。そうでない場合は、htmlを投稿して更新します。

于 2013-06-21T14:41:20.593 に答える
0

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

jQuery('#myTable').DataTable({
                            "fixedHeader":true,
                            "scrollY":"450px",
                            "scrollX":true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false,
                            "searching": false,
                            "scrollCollapse": true
                            });
于 2016-12-07T06:57:18.570 に答える
0

この回答から

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

に

setTimeout(function () {
        var table = $('#example').DataTable();
        table.columns.adjust().draw();
    }, 3000);

働くために!!!!

于 2021-09-23T13:10:40.787 に答える