Question

在引导程序3折叠面板中放置Jquery Datatable（带有自己的响应式插件）时发现了一个问题。

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

我发现的问题是，

如果包装表格的面板在开头折叠，即像这样设置包装器div： <div id="collapseOne" class="panel-collapse collapse">，表格的列不会当我调整浏览器大小时崩溃。
如果包装表格的面板在开头折叠，即如果我要么删除＆＃34;崩溃＆＃34;远离班级，即<div id="collapseOne" class="panel-collapse">，或在＆＃34;中添加＆＃34;进入班级，即<div id="collapseOne" class="panel-collapse collapse in">，然后是表工作正常。窗口时，列可以折叠调整大小。

但是，我希望折叠面板默认关闭。所以我必须添加＆＃34;崩溃＆＃34;没有上课的班级＆＃34;在＆＃34;。

我还检查了bootstrap源代码，

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

我已经花了几天时间仍然无法理解为什么课程会崩溃＆＃34;会导致这个问题。

提前谢谢大家。

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/

Answer 2

我找到了解决问题的解决方法。在页面加载后以编程方式隐藏面板。