J'utilise DataTables.js pour générer des tables. C'est génial, ça marche bien. Je voulais ajouter des onglets à mes "pages" mais il semble que lorsque DataTables est utilisé sur un autre onglet que l'onglet principal, il ne charge pas tout.
Premier onglet
2e onglet
Voici le code source d'une colonne / carte qui a DataTable ajouté.
<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>
Complet le code source est sur GitHub.
J'ai essayé de changer le code responsable des onglets en pensant qu'il y a peut-être un problème avec les onglets que j'utilise, mais même après les avoir modifiés, le comportement est le même .
4 Réponses :
essayez:
changez le code html dans l'onglet:
<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>
et
<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>
ou
<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>
Je ne sais pas ce que contiendrait votre bouton de changement d'onglet. Je suis un peu noob quand il s'agit de cela.
J'ai ajouté une nouvelle réponse
Cela fonctionne, sorta .. en appuyant à nouveau sur l'onglet, j'obtiens un avertissement DataTables: id de table = DT-vdk1ir62 - Impossible de réinitialiser DataTable. Pour plus d'informations sur cette erreur, veuillez consulter datatables.net/tn/3
$ ("# DT-iuyx2s7b"). DataTable (). FnDestroy (); ajoutez le code avant $ ("# DT-iuyx2s7b"). DataTable ({....
if ($ .fn.DataTable.isDataTable ("# DT-vdk1ir62")) {$ ("# DT-vdk1ir62") .DataTable () .clear () .destroy (); }
Mais cela n'aide pas beaucoup.
J'ai modifié votre code en question. veuillez essayer un nouveau code
Oh tu as édité mon code, tu ne devrais pas faire ça. Vous devriez plutôt modifier votre réponse.
Désolé. Je pensais juste que tu pouvais voir
Généralement, sur StackOverflow, tout doit aller dans 1 réponse (d'une personne). Les modifications apportées à la question principale ne doivent être effectuées que pour clarifier la question du demandeur et non pour y apporter une réponse. Veuillez modifier votre réponse avec le code qui, selon vous, résout mon problème.
Malheureusement, le dernier changement n'aide pas. Aucune erreur mais rien ne se passe.
Le problème vient des tables de données, il ne parvient pas à s'afficher correctement lorsque la table est dans
un conteneur caché. Vous pouvez le vérifier simplement en supprimant le style display: none
à partir de .tab-pane , tous les onglets s'affichent et toutes les tables s'affichent correctement. Mais tu dois te cacher
puis les onglets, n'est-ce pas?
Jusqu'à ce que les développeurs de tables de données résolvent ce problème, vous n'avez qu'une seule solution. Gardez tout le volets d'onglets visibles au chargement de la page, laissez les tables de données rendre toutes les tables, puis masquez volets d'onglets. Vous devez donc modifier vos onglets.
Il semble que les tables de données peuvent rendre les tables même si la visibilité du conteneur est définie sur masqué si l'affichage est réglé sur bloquer. Vous pouvez utiliser cette astuce pour masquer le flash de tous les volets d'onglets pendant le chargement de la page. Juste pour vous donner une idée, ajoutez ce qui suit à la en bas de votre page avec la balise body.
<style id="datatables_crazyfix">
.tab-content .tab-pane {
visibility: hidden;
display: block;
}
</style>
<script>
jQuery(function($){
$("#datatables_crazyfix").remove();
});
</script>
Cela semble fonctionner ... y a-t-il quelque chose qui m'empêcherait de l'utiliser tel quel?
Oui, sauf si quelque chose change, par exemple les noms de classe. Vous pouvez y aller car il s'agit d'un correctif temporaire jusqu'à ce que les développeurs de tables de données le corrigent. Informez-moi si une autre complexité apparaît.
Génial. J'ai un autre problème avec les onglets actuels et je vais donc le porter vers une solution différente pour la commutation des onglets (comme dans un code JS différent). Espérons que le même code s'appliquera à une nouvelle solution.
Pourriez-vous jeter un œil à ceci: stackoverflow.com/questions / 55148669 /… J'ai changé la façon dont les onglets sont créés et les choses ne fonctionnent plus. J'ai essayé d'utiliser le vôtre mais cela ne semble plus fonctionner.
Effectuez une responsive.recalc () sur tabButton cliquez. Cela nécessitera probablement le moins de travail.
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
});
}
})
})
})
Initialisez DataTable sur tabButton click. En plus du code ci-dessous, vous devrez supprimer vos autres morceaux de code qui initialisent le DataTable pour les onglets initialement inactifs (Test1 et Test2).
J'ai trouvé que cela produit une mise en page plus cohérente que 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 RESPONSIVE.RECALC ****/
$(button.getAttribute("href"))
.find("table.display.compact")
.DataTable().responsive.recalc();
})
})
J'ai ajouté en premier et aucun changement réel (comme dans rien ne s'est passé). Je l'ai ajouté en bas en tant que script JS. Y a-t-il un endroit spécial où je dois mettre ça?
@MadBoy Veuillez consulter la ligne 477 dans ce violon pour le recalcul réactif. Faites-moi savoir si c'est le résultat que vous attendez.
Une façon de procéder consiste à initialiser les tables de données lorsque l'onglet devient actif, et non au chargement de la page.
$(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(...);
}
});
});
Je ne prends pas en compte le premier onglet car c'est le seul visible au chargement de la page.
JSfiddle: https://jsfiddle.net/dqec4xyw/