多个数据表和引导标签的响应问题 [英] Responsive Issues With Multiple DataTables And Bootstrap Tabs

问题描述

我有 2 个引导程序井，每个井都包含一对标签.每个选项卡包含一个 DataTable(总共有 4 个).当我加载页面时，前两个数据表按预期完美工作.当我切换选项卡时，呈现的表格始终包含 1 列(无论列大小如何)，其余部分是子行的一部分.我已经尝试了几乎所有方法来使表格正确绘制.如果有人有任何建议，请告诉我.另外，我对 Web UI 代码有点陌生，所以如果有任何明显的错误，请多多包涵.

I have 2 bootstrap wells and each well contains a pair of tabs. Each tab contains a DataTable (there are 4 in total). When I load the page the first two DataTables work perfectly as expected. When I switch tabs the tables that are rendered always include 1 column (regardless to the column size) and the remainder are part of the child row. I've tried just about everything to get the table to draw correctly. If anyone has any suggestions please let me know. Also I'm somewhat new to web UI code so if there are any glaring mistakes please bear with me.

我创建了一个示例来模拟我正在编码的内容并显示我正在经历的行为.可以在这里找到:http://live.datatables.net/sozobucu/edit>

I have created an example that mimics what I am coding and shows the behavior I'm experiencing. It can be found here: http://live.datatables.net/sozobucu/edit

推荐答案

响应式插件无法确定隐藏表的列要求.因此，在显示表(选项卡更改)后，需要调用以下内容来重新计算列:

The responsive plugin can't determine the column requirements for tables that are hidden. So after the table is shown (tab changed) the following needs to be called to recalculate the columns:

$($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();

这些调用在 DataTables 10.7 中无法正常运行，但已在最近的每晚构建中得到修复.在短期内，我们将使用夜间构建，直到此修复程序成为正式版本.希望这对遇到相同问题的人有所帮助.

These calls were not functioning correctly in DataTables 10.7 but have been fixed in the most recent nightly build. In the short term we will use the nightly build until this fix makes it into an official release. Hope this helps someone if they experience the same issue.

讨论可以关注这里.

这篇关于多个数据表和引导标签的响应问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！