Responsive-styling/desktop-styling 不适用于 JQuery 数据表

Question

Responsive-styling/desktop-styling 在以下两种情况下不起作用： 1) 调整浏览器大小 window 2) 当数据表驻留在折叠的手风琴内部并且用户打开手风琴时，样式不起作用。

我尝试了以下方法，但除了 dataTable 重新初始化（$('#table').DataTable({parameter list})）之外没有任何效果，但如果行数非常高，加载数据会花费大量时间）。我尝试了以下方法：

1. var $dataTable = $('#table').dataTable(); $dataTable .css({ width: $dataTable .parent().width() }); $dataTable .fnAdjustColumnSizing();
2. $('#table').fnDraw();
3. $('#table').resize();
4. $('#table').columns.adjust().draw();

Answer 1

解决方案

您需要在显示内容时处理事件，并在事件处理程序中调用 responsive.recalc() and columns().adjust() API 方法。这将在显示更改后重新计算列宽。

$('#table').DataTable()
    .columns.adjust()
    .responsive.recalc();

有关详细信息，请参阅 responsive.recalc() and columns().adjust() API 方法。

演示

有关代码和演示，请参阅 this jsFiddle。

链接

有关 jQuery 数据表和 Bootstrap 选项卡的最常见问题的解决方案，请参见 jQuery DataTables – Column width issues with Bootstrap tabs。