DataTable.js doesn't load properly when using TABS
Question
I use DataTables.js to generate tables. It's great, works fine. I wanted to add Tabs to my "pages" but it seems that when DataTables is used on other than primary tab it doesn't load everything.
First Tab
2nd Tab
Following is source code for one column/card that has DataTable added.
<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>
Full source code is on GitHub.
I've tried changing the code that is responsible for Tabs thinking it may be something wrong with the tabs I use but even after changing them behavior is the same.
4 answers
solution1
3 ACCPTED 2019-02-20 09:03:08
One way of doing this is to initialize Datatables when the tab becomes active, and not at the page load.
$(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(...);
}
});
});
I don't take into consideration the first tab because it's the only visible one on page load.
JSfiddle : https://jsfiddle.net/dqec4xyw/
solution2
1 2019-02-15 02:45:00
The issue is with datatables, it is failing to render correctly when the table is within a hidden container. You can verify it just by removing display: none style from .tab-pane , all tabs shows up and all tables render correctly. But you have to hide then tabs right?
Until datatables developers fixes this issue you have only one way to go. Keep all the tab panes visible when page loads, let datatables render all the tables, then hide the tab panes. So you have to tweak your tabs.
It seems datatables can render the tables even if container's visibility is set to hidden if display is set to block. You can use this trick to hide the flash of all the tab panes while the page is still loading. Just to give you an idea, add the following at the bottom of your page withing the body tag.
<style id="datatables_crazyfix">
.tab-content .tab-pane {
visibility: hidden;
display: block;
}
</style>
<script>
jQuery(function($){
$("#datatables_crazyfix").remove();
});
</script>
solution3
0 2019-02-11 20:50:28
try:
change html code in tab:
<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>
and
<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>
or
<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>
solution4
0 2019-02-16 15:57:41
Option 1
Do a responsive.recalc() on tabButton click. This will probably require the least amount of work.
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();
})
})
Option 2
Initialize DataTable on tabButton click. In addition to the code shown below you will have to remove your other pieces of code that initializes the DataTable for the initially inactive tabs (Test1 and Test2).
I've found that this produces more consistent layout than Option 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
});
}
})
})
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.