使用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.