javascript - bootstrap 3 折叠面板内的 Jquery Datatable 响应插件

Question

我在将 Jquery 数据表(带有其自己的响应式插件)放入 bootstrap 3 折叠面板时发现了一个问题。

这是有效的例子: http://jsfiddle.net/Wc4xt/1804/

以下是无效的示例: http://jsfiddle.net/Wc4xt/1803/

我发现的问题是，

• 如果包裹表格的面板在开始时折叠，即像这样设置包装器 div: <div id="collapseOne" class="panel-collapse collapse"> ，表的列不会当我调整浏览器大小时崩溃。

• 如果包裹表格的面板在开始时折叠，即如果我从类中删除“折叠”，即 <div id="collapseOne" class="panel-collapse"> ，或将“in”添加到其类别中，即 <div id="collapseOne" class="panel-collapse collapse in"> , 那么表工作正常。窗口时列可以折叠调整大小。

但是，我希望折叠面板默认保持关闭状态。所以我必须在没有类“in”的类中添加“collapse”。

我还检查了 Bootstrap 源代码，

.collapse {
  display: none;
}
.collapse.in {
  display: block;
}

我花了好几天时间，仍然不明白为什么类“崩溃”会导致这个问题。

提前谢谢大家。

Answer 1

我只是在做同样的事情:Bootstrap 折叠项目与 Jquery 数据表相结合。关闭折叠项时，打开折叠项后 dataTable 无法正确显示。打开折叠项后可以调整表格，这将显示表格:

$('.panel-collapse').on('shown.bs.collapse', function (e) {
  $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
});

这是一个工作示例的 JSFiddle:http://jsfiddle.net/buncjzLp/1/

来源:
Responsive Issues With Multiple DataTables And Bootstrap Tabs https://www.datatables.net/forums/discussion/28234/responsive-issues-with-multiple-tables-and-bootstrap-tabs