twitter-bootstrap - jQuery 数据表在隐藏时初始化时被破坏

Question

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

使用 jQuery.datatable，我在点击 Bootstrap 面板折叠时生成表格。问题是搞乱了“观点”。一图胜千言:

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

如果我打开或调整浏览器控制台的大小， View 会自行刷新并修复问题，我猜这只是某种奇怪的渲染问题。但我不知道如何修复它(不，要求用户打开控制台不是解决方案^^)

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

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

Answer 1

您可以做出响应recalc()可折叠面板为 shown 时的列...

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();
});