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

Question

我正在使用 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 是我的 table ID。
谁能帮我解决这个问题吗？

Answer 1

原因

很可能您的表格最初是隐藏的，这会阻止 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 或 FixColumns 扩展程序，则需要使用其他 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示例。

链接

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