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。
有人可以帮我吗? 提前致谢。

kishore asked 2019-11-07T14:07:44Z
26个解决方案
49 votes

原因

您的表很可能一开始就被隐藏了,这阻止了jQuery DataTables计算列宽。

  • 如果table在可折叠元素中,则当可折叠元素变为可见时,您需要调整标题。

    例如,对于Bootstrap Collapse插件:

    columns().adjust()
  • 如果表格在标签中,则需要在标签可见时调整标题。

    例如,对于Bootstrap Tab插件:

    columns().adjust()

上面的代码调整页面上所有表的列宽。 有关更多信息,请参见columns().adjust() API方法。

响应式,滚动式或固定列扩展

如果您使用的是响应式,Scroller或FixedColumns扩展,则需要使用其他API方法来解决此问题。

  • 如果您使用的是响应式扩展,除了columns().adjust() API方法外,还需要调用columns().adjust() API方法。 请参阅响应性扩展-错误的断点示例。

  • 如果您使用的是Scroller扩展程序,则需要调用columns().adjust() API方法,而不是columns().adjust() API方法。 请参见Scroller扩展-列宽不正确或数据丢失的示例。

  • 如果您使用的是FixedColumns扩展,则除了columns().adjust() API方法外,还需要调用columns().adjust() API方法。 请参见FixedColumns扩展-不正确的列宽示例。

链接

有关最初隐藏表时jQuery DataTables中最常见的列问题的解决方案,请参见jQuery DataTables –具有Bootstrap选项卡的列宽问题。

Gyrocode.com answered 2019-11-07T14:09:43Z
44 votes

我通过用26037920421616033585和sScrollX包装“ dataTable”表来解决了这个问题:

.dataTables_scroll
{
    overflow:auto;
}

并在sScrollX初始化后添加此JS:

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

请勿使用sScrollX或26037920421616033585,将其删除,然后自己添加一个div包装器,以完成相同的操作。

Sharjeel Ahmed answered 2019-11-07T14:10:31Z
18 votes

找到了解决方案:

在表中添加了table-layout:fixed。 并以IE模式打开应用程序。

kishore answered 2019-11-07T14:11:10Z
7 votes

我修好了,为我工作。

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

bamossza answered 2019-11-07T14:11:56Z
4 votes

以上解决方案均不适用于我,但最终我找到了一个可行的解决方案。

我这个问题的版本是由第三方CSS文件引起的,该文件将“ box-sizing”设置为其他值。 我可以使用以下代码解决此问题,而不会影响其他元素:

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

希望这有助于某人!

Strucker answered 2019-11-07T14:12:33Z
3 votes
$("#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)。 上面修改的代码。

列大小问题的讨论

Mike Ramsey answered 2019-11-07T14:13:10Z
2 votes

确保表格宽度为100%

然后“ autoWidth”:true

RAS answered 2019-11-07T14:13:57Z
1 votes

通过链接Mike Ramsey的答案,我最终发现表是在DOM加载之前初始化的。

为了解决这个问题,我将初始化函数放在以下位置:

document.addEventListener('DOMContentLoaded', function() {
    InitTables();
}, false);
Martin O Leary answered 2019-11-07T14:14:49Z
1 votes

以上解决方案都不适合我,因此我将发布解决方案:我将表加载到隐藏的div中,然后在构建表后显示div。 当我首先显示/取消隐藏div,然后在可见表时构建表时,它起作用了。

因此,DataTables无法在隐藏的div中调整列的大小,这很可能是因为在隐藏表时,后端的列宽为0px。

Bryce Chamberlain answered 2019-11-07T14:15:27Z
1 votes

只需将表标签元素包装在具有自动溢出和相对位置的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
alexroat answered 2019-11-07T14:15:58Z
1 votes

正如Gyrocode.com所说:“您的表很可能一开始就被隐藏了,这阻止了jQuery DataTables计算列宽。”

我也遇到了这个问题,并在显示div后通过初始化dataTable来解决它

例如

$('#my_div').show();
$('#my_table').DataTable();
Luis Alberto Corzo answered 2019-11-07T14:16:35Z
1 votes

问题是在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);
vinaya kumar answered 2019-11-07T14:17:05Z
0 votes

标头上的一些简单CSS可以为您完成此操作。

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

无法保证它会按原样工作,因为我没有看到您的html,但是尝试一下,如果没有,您可以发布您的html,我将对其进行更新。

chockleyc answered 2019-11-07T14:17:47Z
0 votes

请参阅此解决方案。 只能通过触发一次窗口滚动事件来解决此问题。

Alexandre Pires answered 2019-11-07T14:18:17Z
0 votes

我面临着同样的问题。我为dataTable添加了scrollX:true属性,它可以正常工作。无需更改数据表的CSS

jQuery('#myTable').DataTable({
                            "fixedHeader":true,
                            "scrollY":"450px",
                            "scrollX":true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false,
                            "searching": false,
                            "scrollCollapse": true
                            });
Jibran answered 2019-11-07T14:18:43Z
0 votes

我知道这很老了,但是我遇到了这个问题,却没有找到好的解决方案。 因此,我决定使用一些js来获取scrollBody的高度(与表格高度相比)。 如果scrollBody小于表格,则我将表格宽度增加15px以解决滚动条。 我也在resize事件上对此进行了设置,以使其在我的容器更改大小时起作用:

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%",
    })
}
stevenlacerda answered 2019-11-07T14:19:11Z
0 votes

$('。DataTables_sort_wrapper')。trigger(“ click”);

Victor Villacorta answered 2019-11-07T14:19:40Z
0 votes

不幸的是,这些解决方案都不适合我。 也许由于表初始化的不同,我们会有不同的结果。 这些解决方案之一可能会为某人工作。 无论如何,想分享我的解决方案,以防万一仍然有人对此问题感到困扰。 不过,它有点骇人听闻,但对我有用,因为我以后不会更改表格的宽度。

加载页面并单击标题后,它会展开并正常显示,然后检查表标题并记录.dataTables_scrollHeadInner div的宽度。 在我的情况下,例如是715px。 然后将该宽度添加到CSS:

.dataTables_scrollHeadInner
{
  width: 715px !important;
}
Alexander answered 2019-11-07T14:20:19Z
0 votes

我的解决方案是添加以下内容:...

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

...

而且看起来还不错。

Rafael Andrs Cspedes Basterio answered 2019-11-07T14:20:55Z
0 votes

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);
} );
Rosue Walford answered 2019-11-07T14:21:23Z
0 votes

为容器表添加固定宽度

JS:

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

CSS:

.tablaChildren {
    width: 97%;
}
Dani answered 2019-11-07T14:21:54Z
0 votes

我有一个类似的问题。 我将在可扩展/可折叠面板中创建表。 只要表格可见,就没有问题。 但是,如果您折叠面板,调整浏览器的大小,然后展开,则问题就出在这里。 每当此功能扩展面板时,我通过在面板标题的click函数中放置以下内容来修复该问题:

            // recalculate column widths, because they aren't recalculated when the table is hidden'
            $('.homeTable').DataTable()
                .columns.adjust()
                .responsive.recalc();
Scott answered 2019-11-07T14:22:21Z
0 votes

使用此方法:替换您的模式名称,清除数据表并加载

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

});
Joseph Stalin answered 2019-11-07T14:22:49Z
0 votes

在页面中添加到脚本:

$( window ).resize(function() {
    var table = $('#tableId').DataTable();
    $('#container').css( 'display', 'block' );
    table.columns.adjust().draw();
});
Dimas Lazuardy answered 2019-11-07T14:23:17Z
0 votes

不需要提出各种拐杖,表格标题宽度与主体不对齐,因为由于表格没有足够的时间来为此填充数据,因此请执行setTimeout

   setTimeout(function() {
     //your datatable code 
  }, 1000);
frontend33 answered 2019-11-07T14:23:45Z
0 votes

使用这些命令

$('#rates').DataTable({
        "scrollX": true,
        "sScrollXInner": "100%",
    });
Hamza Khan answered 2019-11-07T14:24:13Z
translate from https://stackoverflow.com:/questions/17237812/datatable-jquery-table-header-width-not-aligned-with-body-width