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

问题描述

我有2个引导井，每个井都有一对标签。每个选项卡包含一个DataTable（共有4个）。当我加载页面时，前两个DataTable按预期完美工作。当我切换选项卡时，渲染的表始终包含1列（不管列大小），余数是子行的一部分。我已经尝试了一切，让桌子正确绘制。如果有任何建议请告知我。另外我有点新的Web UI代码，所以如果有任何明显的错误，请忍受我。

我创建了一个模拟我正在编码和显示的例子我遇到的行为可以在这里找到： http://live.datatables.net/sozobucu/edit

解决方案

响应式插件无法确定隐藏表的列要求。因此，在显示表格（标签已更改）后，需要调用以下重新计算列：

  $（$。fn .dataTable.tables（true））。DataTable（）。columns.adjust（）。respond.recalc（）; 
  

这些调用在DataTable 10.7中无法正常工作，但在最近的夜间构建中已修复。在短期内，我们将使用夜间版本，直到此修复程序正式发布。希望这有助于有人遇到同样的问题。

讨论可以按照 here 。

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.

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

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.

The discussion can be followed here.

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