引导3崩溃面板中的Jquery Datatable响应式插件

Question

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

以下是有效的示例: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 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/responsive-issues-with-multiple-tables-and-bootstrap-tabs