引导程序 3 折叠面板中的 Jquery 数据表响应插件

Jquery Datatable responsive plugin inside bootstrap 3 collapsed panel

本文关键字：Jquery 数据表 响应 插件 折叠 引导程序      更新时间：2023-09-26

我在将Jquery Datatable（带有自己的响应式插件）放在引导程序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"。

我还检查引导源代码， 

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

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

提前谢谢大家。

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

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

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

来源：多个数据表和引导选项卡的响应问题https://www.datatables.net/forums/discussion/28234/responsive-issues-with-multiple-tables-and-bootstrap-tabs

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

相关文章：