jquery - datatable jquery - 表头宽度与正文宽度不对齐

Question

我正在使用 jQuery 数据表。运行应用程序时，标题宽度与正文宽度不对齐。但是当我点击标题时，它会与正文宽度对齐，但即便如此，也会有一些轻微的错位。此问题仅在 IE 中出现。

这是页面加载时的样子：

在此处输入图像描述

点击标题后：

在此处输入图像描述

我的数据表代码：

$("#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。
谁能帮我解决这个问题？提前致谢。

score 83 · Accepted Answer

原因

很可能您的表格最初是隐藏的，这会阻止 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 方法来解决此问题。

如果您使用的是响应式扩展，除了API 方法之外，您还需要调用responsive.recalc()API方法。请参阅响应式扩展 - 不正确的断点示例。columns().adjust()
如果您使用 Scroller 扩展，则需要调用scroller.measure()API 方法而不是 columns().adjust()API 方法。请参阅滚动条扩展 - 列宽不正确或缺少数据示例。
如果您使用的是 FixedColumns 扩展，除了API 方法之外，您还需要调用fixedColumns().relayout()API方法。请参阅FixedColumns 扩展 - 不正确的列宽示例。columns().adjust()

链接

请参阅jQuery DataTables – Bootstrap 选项卡的列宽问题，以解决最初隐藏表格时 jQuery DataTables 中列的最常见问题。

score 59 · Accepted Answer

div我通过用with包装“dataTable”表解决了这个问题overflow:auto：

.dataTables_scroll
{
    overflow:auto;
}

dataTable并在初始化后添加此 JS ：

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

不要使用sScrollXor sScrollY，删除它们并div自己添加一个包装器来做同样的事情。

score 22 · Accepted Answer

22

找到解决方案：

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

于 2013-06-25T11:32:05.330 回答

score 13 · Accepted Answer

我修好了，为我工作。

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

score 10 · Accepted Answer

使用这些命令

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

score 6 · Accepted Answer

问题是在 DOM 上绘制数据表之前调用数据表，在调用数据表之前使用 set time out。

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

score 5 · Accepted Answer

不需要想出各种拐杖，表头宽度和body不对齐，因为由于table没有足够的时间为此填写数据，做setTimeout

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

score 5 · Accepted Answer

正如 Gyrocode.com 所说，“很可能您的表格最初是隐藏的，这会阻止 jQuery DataTables 计算列宽。”

我也有这个问题，并通过在显示 div 后初始化 dataTable 来解决它

例如

$('#my_div').show();
$('#my_table').DataTable();

score 4 · Accepted Answer

上述解决方案都不适合我，但我最终找到了一个可行的解决方案。

我的这个问题的版本是由第三方 CSS 文件引起的，该文件将“box-sizing”设置为不同的值。我能够使用以下代码在不影响其他元素的情况下解决此问题：

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

希望这对某人有帮助！

score 4 · Accepted Answer

当使用 scrollX 或 scrollY 参数在 DataTables 中启用滚动时，它会将整个表格拆分为两个或三个单独的 HTML 表格元素；页眉、正文和可选的页脚。这样做是为了提供以跨浏览器方式滚动 DataTable 不同部分的能力。

就我而言，我想要水平滚动条，因为内容正在向右滚动。因此，添加“scrollX”参数会在某些具有更多列的页面中产生此问题。

下面的代码在 DataTable 周围包裹了一个 div，样式为“overflow as auto”。dataTable 执行完成后，我们需要添加 div。我们可以这样做：

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

如果您正在使用 scrollX、scrollY、scrollXInner 或 sScrollXInner 选项 - 删除它们。它们可能会导致问题。

资料来源：http ://sforsuresh.in/datatables-header-body-not-aligned

score 4 · Accepted Answer

此代码将使标题与正文对齐。 data-table-basic是我给的数据表的id。

<style>    
    #data-table-basic_wrapper .dataTable, #data-table-basic_wrapper .dataTables_scrollHeadInner {
        width: 100% !important;
    }
</style>

score 4 · Accepted Answer

4

确保表格宽度为 100%

然后 "autoWidth":true

于 2016-02-01T14:47:45.067 回答

score 3 · Accepted Answer

$("#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)。修改了上面的代码。

关于列大小问题的讨论

score 3 · Accepted Answer

3

几个小时后，我刚刚从其中删除scrollYoptions，它工作正常

于 2021-02-18T17:03:41.373 回答

score 1 · Accepted Answer

只需将 table 标记元素包装在具有溢出自动和相对位置的 div 中。它适用于 chrome 和 IE8。我添加了高度 400 像素，以便即使在重新加载数据后也能保持表格大小固定。

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

score 1 · Accepted Answer

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

所以 DataTables 不能在隐藏的 div 中调整列的大小，可能是因为在隐藏表时它在后端获得了 0px 的列宽。

score 1 · Accepted Answer

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

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

document.addEventListener('DOMContentLoaded', function() {
    InitTables();
}, false);

score 0 · Accepted Answer

标题上的一些简单的 css 应该为您执行此操作。

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

不能保证这会正常工作，因为我还没有看到你的 html，但尝试一下，如果没有，那么你可以发布你的 html，我会更新它。

score 0 · Accepted Answer

我面临着同样的问题。我为 dataTable 添加了 scrollX: true 属性并且它起作用了。无需更改数据表的 CSS

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

score 0 · Accepted Answer

在页面中添加到您的脚本：

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

我意识到已经有很多答案，但我没有看到使用图书馆的标题选项本身的答案。您可以为每一列定义数据，然后定义一个标题属性，该属性将正确呈现标题。在这种情况下，您只需要一个内部没有任何内容（没有元素）的表格 HTML 声明。不需要任何额外的 CSS 或 JS。

itemsTable = $('#itemsTable').DataTable({
    "ajax": {
        "url": "/getItemData",
        "dataSrc": ""
    },
    "columns": [
        {data: "itemNumber", title: "Item #" },
        {data: "author", title: "Author" },
        {data: "title", title: "Title" },
        {data: "genre", title: "Genre" },
        {data: "publisher", title: "Publisher" }
    ]
});

score 0 · Accepted Answer

0

$('.DataTables_sort_wrapper').trigger("点击");

于 2017-09-06T17:35:53.630 回答

score 0 · Accepted Answer

我有一个类似的问题。我会在可扩展/可折叠面板中创建表格。只要桌子是可见的，没问题。但是如果你折叠一个面板，调整浏览器的大小，然后展开，问题就在那里。每当此功能扩展面板时，我通过将以下内容放置在面板标题的单击功能中来修复它：

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

score 0 · Accepted Answer

使用这个：替换你的模式名称，清除你的数据表并加载

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

});

score 0 · Accepted Answer

我的解决方案是添加这个：...

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

...

它看起来不错。

score 0 · Accepted Answer

我确实有一段时间遇到这个问题，我意识到我的桌子在显示之前就已经画好了。

<div class="row">
    <div class="col-md-12" id="divResults">
    </div>
</div>        

function ShowResults(data) {
    $div.fadeOut('fast', function () {
        $div.html(data);
        // I used to call DataTable() here (there may be multiple tables in data)
        // each header's width was 0 and missaligned with the columns
        // the width woulld resize when I sorted a column or resized the window 
        // $div.find('table').DataTable(options);
        $div.fadeIn('fast', function () {
            Loading(false);
            $div.find('table').DataTable(options); // moved the call here and everything is now dandy!!!
        });
    });
}

score 0 · Accepted Answer

我正在使用 Bootstrap 4，并将该类添加table-sm到我的表中。这弄乱了格式。删除该类解决了问题。

如果您无法删除该类，我怀疑通过 javascript 将其添加到 headers 表会起作用。启用时，Datatables 使用两个表来显示一个表scrollX——一个用于表头，一个用于正文。

score 0 · Accepted Answer

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

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

.dataTables_scrollHeadInner
{
  width: 715px !important;
}

score 0 · Accepted Answer

从这个答案

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

至

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

去工作！！！！

score 0 · Accepted Answer

为容器表添加固定宽度

JS：

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

CSS：

.tablaChildren {
    width: 97%;
}

score 0 · Accepted Answer

0

请参阅此解决方案。它可以通过仅触发一次窗口滚动事件来解决。

于 2016-05-17T15:20:02.847 回答

score 0 · Accepted Answer

我知道这很旧，但我只是遇到了这个问题，并没有找到一个很好的解决方案。因此，与表格高度相比，我决定使用一些 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%",
    })
}

score -1 · Accepted Answer

如果您的表或包含该表的 div 最初是隐藏的，请首先使该 div 可见，然后绘制该表

jquery - datatable jquery - 表头宽度与正文宽度不对齐

34 回答 34

原因

解决方案

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

链接

Related

Reference