使用TABS时，DataTable.js无法正确加载
[英]DataTable.js doesn't load properly when using TABS
问题描述
我使用DataTables.js生成表。 它很棒，工作正常。 我想将Tabs添加到我的“页面”中，但似乎当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>
完整源代码在GitHub上。
我已经尝试更改负责Tabs的代码，认为它可能是我使用的选项卡有问题，但即使在更改它们之后，行为也是一样的。
4 个解决方案
解决方案1
3 已采纳 2019-02-20 09:03:08
一种方法是在选项卡变为活动状态时初始化数据表，而不是在页面加载时。
$(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
1 2019-02-15 02:45:00
问题在于数据表，当表在隐藏容器中时，无法正确呈现。 您可以通过从.tab-pane删除display: none样式来验证它， display: none所有选项卡并正确呈现所有表。 但你必须隐藏标签吗？
在数据表开发人员修复此问题之前，您只有一种方法可以解决。 在页面加载时保持所有选项卡窗格可见，让数据表呈现所有表，然后隐藏选项卡窗格。 所以你必须调整你的标签。
即使显示设置为阻止，即使容器的可见性设置为隐藏，似乎数据表也可以呈现表。 您可以使用此技巧在页面仍在加载时隐藏所有选项卡窗格的闪存。 只是为了给您一个想法，请在页面底部添加以下正文标记。
<style id="datatables_crazyfix">
.tab-content .tab-pane {
visibility: hidden;
display: block;
}
</style>
<script>
jQuery(function($){
$("#datatables_crazyfix").remove();
});
</script>
解决方案3
0 2019-02-11 20:50:28
尝试：
更改标签中的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>
解决方案4
0 2019-02-16 15:57:41
选项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
});
}
})
})
})
使用 dataTable.js 进行 Bootstrap 表排序、过滤、分页
[英]Bootstrap table sorting, filtering, pagination using dataTable.js
如何使用 datatable.js 在 tbody 中使用 rowspan 和 colspan？
[英]How to use rowspan and colspan in tbody using datatable.js?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.