响应式样式/桌面样式不适用于 JQuery 数据表

Question

响应式样式/桌面样式在以下 2 种情况下不起作用： 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。

链接

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