Question

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

这是页面加载时的样子：

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是我的表格。
任何人都可以帮我这个吗？提前谢谢。

Answer 1

原因

最初可能会隐藏您的表，这会阻止jQuery DataTable计算列宽。

解

如果table位于可折叠元素中，则需要在可折叠元素可见时调整标题。

例如，对于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方法来解决此问题。

如果您使用自适应扩展程序，则需要将responsive.recalc() API方法另外调用columns().adjust() API方法。请参阅Responsive extension – Incorrect breakpoints示例。
如果您使用的是Scroller扩展程序，则需要调用scroller.measure() API方法而不是 columns().adjust() API方法。请参阅Scroller extension – Incorrect column widths or missing data示例。
如果您使用的是FixedColumns扩展程序，则需要将fixedColumns().relayout() API方法另外调用columns().adjust() API方法。请参阅FixedColumns extension – Incorrect column widths示例。

LINKS

当最初隐藏表时，请参阅jQuery DataTables – Column width issues with Bootstrap tabs以获取jQuery DataTables中列最常见问题的解决方案。

Answer 2

我通过将带有div overflow:auto的“dataTable”表格包裹起来解决了这个问题：

.dataTables_scroll
{
    overflow:auto;
}

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

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

请勿使用sScrollX或sScrollY，删除它们并自行添加div包装，这样做会有同样的效果。

Answer 3

找到解决方案：

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

Answer 4

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

此问题的我的版本是由第三方CSS文件引起的，该文件设置了＆＃39;框大小调整＆＃39;不同的价值。我能够在不影响其他元素的情况下解决问题：

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

希望这有助于某人！

Answer 5

$("#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）调用到数据表调用的末尾。上面的修改代码。

Discussion on Column sizing issue

Answer 6

确保表格宽度为100％

然后“autoWidth”：true

Answer 7

我修好了，为我工作。

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

Answer 8

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

因此，DataTables无法对隐藏div中的列进行调整，可能是因为当隐藏表时，后端的列宽为0px。

Answer 9

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

我也有这个问题，只需在显示div

后初始化dataTable即可解决

例如

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

Answer 10

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

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

下面的代码用样式“溢出为自动”围绕数据表包裹一个 div。我们需要在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

Answer 11

经过一吨小时后，我只是从 scrollY 中删除了 options 并且它工作正常

Answer 12

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

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

Answer 13

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

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

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

Answer 14

只需将表标记元素包含在具有溢出自动和位置相对的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

Answer 15

我意识到已经有很多答案，但我没有看到使用图书馆标题选项本身的答案。您可以为每列定义数据，然后定义标题属性，这将正确呈现标题。在这种情况下，您只需要一个表格 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" }
    ]
});

Answer 16

标题上的一些简单的CSS应该为你做到这一点。

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

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

Answer 17

我确实有这个问题一段时间了，我意识到我的桌子是在显示之前绘制的。

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

Answer 18

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

如果您不能删除该类，我怀疑可以通过javascript将其添加到标头表中。启用scrollX时，数据表使用两个表来显示一个表-一个用于标题，另一个用于主体。

Answer 19

使用这些命令

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

Answer 20

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

foreach (XmlNode id in xnList1)
{
    Console.WriteLine(id.InnerText);
}

Answer 21

添加到页面中的脚本：

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

Answer 22

问题是在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);

Answer 23

使用此选项：替换模态名称，清除数据表并加载

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

});

Answer 24

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

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

Answer 25

为容器表添加固定宽度

<强> JS：

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

<强> CSS：

.tablaChildren {
    width: 97%;
}

Answer 26

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

Answer 27

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

def searching(filename,word):
    counter = 0
    with open(filename) as f:
        for line in f:
            if word in line:
                print(word)
                counter += 1
    return counter

x = searching("filename","wordtofind")
print(x)

...

它看起来很好。

Answer 28

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

加载页面并单击标题后，它会扩展并正常显示，我检查表头并记录.dataTables_scrollHeadInner div的宽度。在我的例子中，它是715px。然后将该宽度添加到css：

.dataTables_scrollHeadInner
{
  width: 715px !important;
}

Answer 29

$（ 'DataTables_sort_wrapper'）的触发器（ “点击”）;

Answer 30

我知道这已经过时了，但我遇到了问题并没有找到一个好的解决方案。因此，与桌面高度相比，我决定使用一些j来获得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%",
    })
}

Answer 31

我遇到了同样的问题。我为dataTable添加了scrollX：true属性并且它工作正常。无需更改数据表的CSS

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

Answer 32

见this solution。它可以通过仅触发一次的窗口滚动事件来解决。

datatable jquery - 表头宽度未与主体宽度对齐

32 个答案:

原因

解

响应，滚动或固定的扩展

LINKS