bootstrap 3折叠面板内的jQuery Datatable响应插件

Question

在将Jquery Datatable（带有其自己的响应插件）放在bootstrap 3折叠面板中时，发现一个问题。

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

这是不起作用的示例： http : //jsfiddle.net/Wc4xt/1803/

我发现的问题是

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

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

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

我还检查了引导程序源代码，

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

我花了几天的时间，仍然看不到为什么类“崩溃”会导致此问题。

谢谢大家。

Answer 1

我只是在做同一件事：将Bootstrap折叠项与Jquery dataTables结合在一起。 关闭折叠项时，打开折叠项后dataTable无法正确显示。 可以在打开折叠项之后调整表格，这将按原样显示表格：

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

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

资料来源：
多个DataTables和Bootstrap选项卡的响应性问题 https://www.datatables.net/forums/discussion/28234/response-issues-with-multiple-tables-and-bootstrap-tabs

Answer 2

我想出了一种解决方法来解决我的问题。 加载页面后以编程方式隐藏面板。