jQuery数据表在隐藏时初始化时被破坏答案

【问题标题】：jQuery datatable gets broken when initialized while being hiddenjQuery数据表在隐藏时初始化时被破坏
【发布时间】：2014-07-28 19:15:31
【问题描述】：

嗯，标题不是很明确，但我真的找不到简单的东西来解释这里的问题。

使用 jQuery.datatable，我在单击引导面板折叠时生成表。事情是搞砸了“视图”。一张图抵千言：

https://docs.google.com/file/d/0ByzbHcAxmCyvbXVVNTNYUXE1Qms/edit

如果我打开或调整浏览器控制台的大小，视图会自行刷新并修复问题，我想这只是某种奇怪的渲染问题。但是不知道怎么解决（不，要求用户打开控制台不是解决办法^^）

无论如何，您知道如何“刷新”页面，有什么解决方法吗？

顺便说一句，如果您找到更好的标题和标签，请随意！

【问题讨论】：

这对我来说是一个真正的问题，我所有带有数据表的弹出窗口在显示之前都以某种方式隐藏，但无法正确显示。到目前为止，我找不到任何相关信息。
似乎特定于数据表：datatables.net/forums/discussion/22556/…

标签： twitter-bootstrap jquery-datatables

【解决方案1】：

当可折叠面板为shown时，您可以使列响应recalc()...

var $table = $('#YourTableId');

//init the table
$table.dataTable({ "responsive" : true });

//bind to boostrap panel shown event and recalc
$table.parent().closest('.panel-collapse').on('shown.bs.collapse', function () {
    $table.DataTable().columns().responsive.recalc();
});

【讨论】：

不得不说很久没测试了，希望对大家有帮助。
似乎不适用于 DataTables 1.10.12 和 Material Design Lite 1.1.3 选项卡（我在选项卡打开时触发了自定义事件）。我确实包含了 DataTable 响应式扩展。

【解决方案2】：

我找到了解决方法。问题是如果表格在初始化时被隐藏，那么它将无法正确显示。诀窍是使用 JS 而不是 CSS 隐藏表格，因为 JS 会在页面加载后应用使用$(function(){});。因此，如果您之前初始化表格以在显示时由 JS 隐藏它，那么它将正确显示。顺序很重要！

【讨论】：