响应式样/桌面样式对JQuery数据表不起作用

Question

自适应样式/桌面样式在以下两种情况下无效： 1）重新调整浏览器窗口大小 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()和columns().adjust() API方法。这将在显示更改后重新计算列宽。

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

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

样本

请参阅this jsFiddle以获取代码和演示。

LINKS

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