Menu
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.
704
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/
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
