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

Posted 2023-05-07

【中文标题】bootstrap 3折叠面板内的Jquery Datatable响应式插件

【英文标题】：Jquery Datatable responsive plugin inside bootstrap 3 collapsed panel

【发布时间】：2015-05-13 12:05:12

【问题描述】：

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

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

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

我发现的问题是，

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

1234563 即<div id="collapseOne" class="panel-collapse collapse in">，然后 表工作正常。窗口时列可以折叠 调整大小。

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

我还检查了引导源代码，

.collapse 
  display: none;

.collapse.in 
  display: block;

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

提前谢谢大家。

【参考方案1】：

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

$('.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

【参考方案2】：

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