使用 TABS 时 DataTable.js 无法正确加载
Posted
技术标签:
【中文标题】使用 TABS 时 DataTable.js 无法正确加载【英文标题】：DataTable.js doesn't load properly when using TABS 【发布时间】：2019-07-05 10:27:00 【问题描述】：我使用 DataTables.js 来生成表格。这很棒，工作正常。我想将选项卡添加到我的“页面”中，但似乎当在主选项卡以外的其他选项卡上使用 DataTables 时，它不会加载所有内容。
第一个标签
第二个标签
以下是添加了 DataTable 的一列/卡片的源代码。
<div class="three defaultColumn defaultCard">
<script>
$(document).ready(function()
$("#DT-iuyx2s7b").DataTable(
dom: "Bfrtip",
buttons: [
"copyhtml5",
"excelHtml5",
"csvHtml5",
"pdfHtml5"
],
colReorder: true,
paging: true,
pagingType: ["full_numbers"],
lengthMenu: [
[15, 25, 50, 100],
-1,
[15, 25, 50, 100],
"All"
],
ordering: true,
info: true,
procesing: true,
responsive:
details: true
,
select: true,
searching: true,
stateSave: true
);
);
</script>
<table id="DT-iuyx2s7b" class="display compact">
<thead>
<tr>
<th>Name</th>
<th>Id</th>
<th>PriorityClass</th>
<th>FileVersion</th>
<th>HandleCount</th>
<th>WorkingSet</th>
<th>PagedMemorySize</th>
<th>PrivateMemorySize</th>
<th>VirtualMemorySize</th>
<th>TotalProcessorTime</th>
<th>SI</th>
<th>Handles</th>
<th>VM</th>
<th>WS</th>
<th>PM</th>
<th>NPM</th>
<th>Path</th>
<th>Company</th>
<th>CPU</th>
<th>ProductVersion</th>
<th>Description</th>
<th>Product</th>
<th>__NounName</th>
<th>BasePriority</th>
<th>ExitCode</th>
<th>HasExited</th>
<th>ExitTime</th>
<th>Handle</th>
<th>SafeHandle</th>
<th>MachineName</th>
<th>MainWindowHandle</th>
<th>MainWindowTitle</th>
<th>MainModule</th>
<th>MaxWorkingSet</th>
<th>MinWorkingSet</th>
<th>Modules</th>
<th>NonpagedSystemMemorySize</th>
<th>NonpagedSystemMemorySize64</th>
<th>PagedMemorySize64</th>
<th>PagedSystemMemorySize</th>
<th>PagedSystemMemorySize64</th>
<th>PeakPagedMemorySize</th>
<th>PeakPagedMemorySize64</th>
<th>PeakWorkingSet</th>
<th>PeakWorkingSet64</th>
<th>PeakVirtualMemorySize</th>
<th>PeakVirtualMemorySize64</th>
<th>PriorityBoostEnabled</th>
<th>PrivateMemorySize64</th>
<th>PrivilegedProcessorTime</th>
<th>ProcessName</th>
<th>ProcessorAffinity</th>
<th>Responding</th>
<th>SessionId</th>
<th>StartInfo</th>
<th>StartTime</th>
<th>SynchronizingObject</th>
<th>Threads</th>
<th>UserProcessorTime</th>
<th>VirtualMemorySize64</th>
<th>EnableRaisingEvents</th>
<th>StandardInput</th>
<th>StandardOutput</th>
<th>StandardError</th>
<th>WorkingSet64</th>
<th>Site</th>
<th>Container</th>
</tr>
</thead>
<tbody>
<tr>
<td>1Password</td>
<td>16216</td>
<td>Normal</td>
<td>7.3.661</td>
<td>901</td>
<td>70991872</td>
<td>157519872</td>
<td>157519872</td>
<td>747872256</td>
<td>00:01:03.4531250</td>
<td>1</td>
<td>901</td>
<td>747872256</td>
<td>70991872</td>
<td>157519872</td>
<td>60464</td>
<td>
C:\Users\pklys\AppData\Local\1Password\app\7\1Password.exe
</td>
<td>AgileBits Inc.</td>
<td>63,453125</td>
<td>7.3.661</td>
<td>1Password for Windows desktop</td>
<td>1Password</td>
<td>Process</td>
<td>8</td>
<td></td>
<td>False</td>
<td></td>
<td>6076</td>
<td>
Microsoft.Win32.SafeHandles.SafeProcessHandle
</td>
<td>.</td>
<td>0</td>
<td></td>
<td>
System.Diagnostics.ProcessModule
(1Password.exe)
</td>
<td>1413120</td>
<td>204800</td>
<td>
System.Diagnostics.ProcessModuleCollection
</td>
<td>60464</td>
<td>60464</td>
<td>157519872</td>
<td>683568</td>
<td>683568</td>
<td>174804992</td>
<td>174804992</td>
<td>191524864</td>
<td>191524864</td>
<td>799748096</td>
<td>799748096</td>
<td>True</td>
<td>157519872</td>
<td>00:00:08.7343750</td>
<td>1Password</td>
<td>255</td>
<td>True</td>
<td>1</td>
<td>
System.Diagnostics.ProcessStartInfo
</td>
<td>11.02.2019 19:10:11</td>
<td></td>
<td>
System.Diagnostics.ProcessThreadCollection
</td>
<td>00:00:54.7187500</td>
<td>747872256</td>
<td>False</td>
<td></td>
<td></td>
<td></td>
<td>70991872</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
完整的source code 在 GitHub 上。
我尝试更改负责选项卡的代码，认为我使用的选项卡可能有问题，但即使在更改它们之后，行为也是相同的。
【问题讨论】：
【参考方案1】：这样做的一种方法是在选项卡变为活动状态时初始化数据表，而不是在页面加载时。
$(document).ready(function()
$('a').on('click', function()
if ($(this).attr('href')) == "#Test1" && !$.fn.dataTable.isDataTable("#DT-iuyx2s7b") && !$.fn.dataTable.isDataTable("#DT-2u8iw0gr"))
$("#DT-iuyx2s7b").DataTable(...);
$("#DT-2u8iw0gr").DataTable(...);
else if ($(this).attr('href')) == "#Test2" && !$.fn.dataTable.isDataTable("#DT-vdk1ir62"))
$("#DT-vdk1ir62").DataTable(...);
);
);
我不考虑第一个标签，因为它是页面加载时唯一可见的标签。
JSfiddle：https://jsfiddle.net/dqec4xyw/
【讨论】：
【参考方案2】：问题在于数据表，当表在其中时无法正确呈现
一个隐藏的容器。您可以通过删除 display: none 样式来验证它
从.tab-pane 开始，所有选项卡都会显示并且所有表格都正确呈现。但你必须隐藏
那么标签对吗？
在数据表开发人员解决此问题之前，您只有一条路可以走。保留所有 页面加载时可见的选项卡窗格，让数据表呈现所有表，然后隐藏 选项卡窗格。所以你必须调整你的标签。
即使容器的可见性设置为隐藏，数据表似乎也可以呈现表 如果显示设置为阻止。您可以使用此技巧隐藏所有选项卡窗格的闪烁 当页面仍在加载时。只是给你一个想法，在 带有body标签的页面底部。
<style id="datatables_crazyfix">
.tab-content .tab-pane
visibility: hidden;
display: block;
</style>
<script>
jQuery(function($)
$("#datatables_crazyfix").remove();
);
</script>
【讨论】：
这似乎有效......有什么可以阻止我按原样使用它吗？ 是的，除非有任何改变，例如类名。您可以使用它，因为这是一个临时修复，直到数据表开发人员修复它。如果出现任何其他复杂性，请通知我。 太棒了。我对当前选项卡还有一个问题，因此我将把它移植到用于选项卡切换的不同解决方案（如在不同的 JS 代码中）。希望相同的代码适用于新的解决方案。 你能看看这个吗：***.com/questions/55148669/…我改变了标签的完成方式，事情不再起作用了。我试过用你的，但它似乎不再起作用了。【参考方案3】：试试：
更改标签中的 html 代码：
<div>
<ul class="tab-nav">
<li><a class="button tabbtn active" href="#Test">Test </a></li>
<li><a class="button tabbtn" href="#Test1">Test1 </a></li>
<li><a class="button tabbtn" href="#Test2">Test2 </a></li>
</ul>
</div>
和
<script>
$( ".tabbtn" ).on( "click", function()
setTimeout(function()
$("#DT-iuyx2s7b").DataTable(
dom: "Bfrtip",
destroy: true,
buttons: [
"copyHtml5",
"excelHtml5",
"csvHtml5",
"pdfHtml5"
],
colReorder: true,
paging: true,
pagingType: ["full_numbers"],
lengthMenu: [
[15, 25, 50, 100],
-1,
[15, 25, 50, 100],
"All"
],
ordering: true,
info: true,
procesing: true,
responsive:
details: true
,
select: true,
searching: true,
stateSave: true
);
,200)
);
</script>
或
<script>
var table=null;
$(document).ready(function()
table= $("#DT-iuyx2s7b").DataTable(
dom: "Bfrtip",
buttons: [
"copyHtml5",
"excelHtml5",
"csvHtml5",
"pdfHtml5"
],
colReorder: true,
paging: true,
pagingType: ["full_numbers"],
lengthMenu: [
[15, 25, 50, 100],
-1,
[15, 25, 50, 100],
"All"
],
ordering: true,
info: true,
procesing: true,
responsive:
details: true
,
select: true,
searching: true,
stateSave: true
);
);
$( ".tabbtn" ).on( "click", function()
setTimeout(function()
table.ajax.reload();
,300);
);
</script>
【讨论】：
我不确定您的标签更改按钮中的内容。说到这个，我有点菜鸟。 我添加了一个新答案 它工作，排序.. 再次按 Tab 时，我收到 DataTables 警告：table id=DT-vdk1ir62 - 无法重新初始化 DataTable。有关此错误的更多信息，请参阅datatables.net/tn/3 $("#DT-iuyx2s7b").dataTable().fnDestroy();在 $("#DT-iuyx2s7b").DataTable(.... 之前添加代码 if ($.fn.DataTable.isDataTable("#DT-vdk1ir62")) $("#DT-vdk1ir62") .DataTable() .clear() .destroy(); 【参考方案4】：选项 1
在 tabButton 点击时执行responsive.recalc()。这可能需要最少的工作量。
tabButtons.map(function (button)
button.addEventListener("click", function ()
document
.querySelector("li a.active.button")
.classList.remove("active");
button.classList.add("active");
document
.querySelector(".tab-pane.active")
.classList.remove("active");
document
.querySelector(button.getAttribute("href"))
.classList.add("active");
/**** ADDED RESPONSIVE.RECALC ****/
$(button.getAttribute("href"))
.find("table.display.compact")
.DataTable().responsive.recalc();
)
)
选项 2
在 tabButton 单击时初始化 DataTable。除了下面显示的代码之外，您还必须删除为最初不活动的选项卡（Test1 和 Test2）初始化 DataTable 的其他代码。
我发现这会产生比选项 1 更一致的布局。
tabButtons.map(function (button)
button.addEventListener("click", function ()
document
.querySelector("li a.active.button")
.classList.remove("active");
button.classList.add("active");
document
.querySelector(".tab-pane.active")
.classList.remove("active");
document
.querySelector(button.getAttribute("href"))
.classList.add("active");
/** ADDED DATATABLE INITIALIZATION HERE **/
var tabPaneToActivate = document
.querySelector(button.getAttribute("href"))
tabPaneToActivate.classList.add("active");
tabPaneToActivate.querySelectorAll("table.display.compact").forEach(function (el)
if (!$.fn.dataTable.isDataTable(el))
/** ^^^ Only initialize once ^^^ **/
$(el).DataTable(
dom: "Bfrtip",
buttons: [
"copyHtml5",
"excelHtml5",
"csvHtml5",
"pdfHtml5"
],
colReorder: true,
paging: true,
pagingType: ["full_numbers"],
lengthMenu: [
[15, 25, 50, 100],
-1,
[15, 25, 50, 100],
"All"
],
ordering: true,
info: true,
procesing: true,
responsive:
details: true
,
select: true,
searching: true,
stateSave: true
);
)
)
)
【讨论】：
我先添加了，但没有真正的变化（因为什么也没发生）。我在底部添加了它作为 JS 脚本。有什么特别的地方我必须把它放进去吗？ @MadBoy 请参阅this fiddle 中的第 477 行以获取响应式重新计算。让我知道这是否是您期望的结果。以上是关于使用 TABS 时 DataTable.js 无法正确加载的主要内容，如果未能解决你的问题，请参考以下文章
使用 Datatable.js 时，如何将我点击的页面编号发送回我的后端？ （有一些小问题）