jquery datatable – largeur d’en-tête de la table non alignée sur la largeur du corps

J’utilise les fichiers de données jQuery. Lors de l’exécution de l’application, la largeur de l’en-tête n’est pas alignée sur la largeur du corps. Mais quand je clique sur l’en-tête, il s’aligne avec la largeur du corps mais, même dans ce cas, il ya un léger désalignement. Ce problème se produit uniquement dans IE.

JSFiddle

Voici à quoi cela ressemble lorsque la page est chargée:

entrer la description de l'image ici

Après avoir cliqué sur l’en-tête:

entrer la description de l'image ici

Mon code datatable:

$("#rates").dataTable({ "bPaginate": false, "sScrollY": "250px", "bAutoWidth": false, "bScrollCollapse": true, "bLengthChange": false, "bFilter": false, "sDom": 'rt', "aoColumns": [{ "bSortable": false }, null, null, null, null ] }); 

rates est mon identifiant de table.
Quelqu’un pourrait-il m’aider avec ça? Merci d’avance.

J’ai résolu ce problème en encapsulant la table “dataTable” avec un div avec overflow:auto :

 .dataTables_scroll { overflow:auto; } 

et en ajoutant ce JS après l’initialisation de votre dataTable :

 jQuery('.dataTable').wrap('
');

N’utilisez pas sScrollX ou sScrollY , supprimez-les et ajoutez vous-même un wrapper div qui fait la même chose.

CAUSE

Votre table est probablement masquée initialement, ce qui empêche jQuery DataTables de calculer la largeur des colonnes.

SOLUTION

  • Si la table se trouve dans l’élément repliable, vous devez ajuster les en-têtes lorsque l’élément compressible devient visible.

    Par exemple, pour le plug-in Bootstrap Collapse:

     $('#myCollapsible').on('shown.bs.collapse', function () { $($.fn.dataTable.tables(true)).DataTable() .columns.adjust(); }); 
  • Si le tableau est dans l’onglet, vous devez ajuster les en-têtes lorsque l’onglet devient visible.

    Par exemple, pour le plug-in Bootstrap Tab:

     $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){ $($.fn.dataTable.tables(true)).DataTable() .columns.adjust(); }); 

Le code ci-dessus ajuste la largeur des colonnes pour toutes les tables de la page. Voir les columns().adjust() méthodes API pour plus d’informations.

EXTENSIONS SENSIBLES, DÉFILEMENT OU FIXES

Si vous utilisez des extensions Responsive, Scroller ou FixedColumns, vous devez utiliser des méthodes API supplémentaires pour résoudre ce problème.

  • Si vous utilisez l’extension Responsive, vous devez appeler la méthode API responsive.recalc() en plus de la méthode API columns().adjust() . Voir Extension sensible – Exemple de points d’arrêt incorrects .

  • Si vous utilisez l’extension Scroller, vous devez appeler la méthode API scroller.measure() au lieu de la méthode API columns().adjust() . Voir Extension Scroller – Largeur de colonne incorrecte ou exemple de données manquant .

  • Si vous utilisez l’extension FixedColumns, vous devez appeler la méthode API fixedColumns().relayout() en plus de la méthode API fixedColumns().relayout() . Voir Extension FixedColumns – Exemple de largeur de colonne incorrect .

LIENS

Voir jQuery DataTables – Problèmes de largeur de colonne avec les tabs Bootstrap pour trouver des solutions aux problèmes les plus courants liés aux colonnes dans jQuery DataTables lorsque la table est initialement masquée.

Trouvé la solution:

table-layout:fixed ajoutée table-layout:fixed à la table. Et ouvert l’application en mode IE.

Aucune des solutions ci-dessus n’a fonctionné pour moi, mais j’ai finalement trouvé une solution.

Ma version de ce problème était due à un fichier CSS tiers qui définissait la taille de la boîte à une valeur différente. J’ai pu résoudre le problème sans affecter d’autres éléments avec le code ci-dessous:

  $table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box"); 

J’espère que cela aide quelqu’un!

 $("#rates").dataTable({ "bPaginate": false, "sScrollY": "250px", "bAutoWidth": false, "bScrollCollapse": true, "bLengthChange": false, "bFilter": false, "sDom": '<"top">rt<"bottom"flp><"clear">', "aoColumns": [{ "bSortable": false }, null, null, null, null ]}).fnAdjustColumnSizing( false ); 

Essayez d’appeler le fnAdjustColumSizing (false) à la fin de votre appel de données. Code modifié ci-dessus.

Discussion sur le problème du dimensionnement des colonnes

assurez-vous que la largeur de la table est de 100%

Puis “autoWidth”: true

En reliant la réponse de Mike Ramsey, j’ai finalement constaté que la table était en cours d’initialisation avant le chargement du DOM.

Pour résoudre ce problème, je mets la fonction d’initialisation à l’emplacement suivant:

 document.addEventListener('DOMContentLoaded', function() { InitTables(); }, false); 

J’ai corrigé, travaille pour moi.

 var table = $('#example').DataTable(); $('#container').css( 'display', 'block' ); table.columns.adjust().draw(); 

Ou

 var table = $('#example').DataTable(); table.columns.adjust().draw(); 

Référence: https://datatables.net/reference/api/columns.adjust ()

Aucune des solutions ci-dessus n’a fonctionné pour moi, donc je posterai ma solution: je chargeais la table dans un div caché et montrais ensuite le div après que la table ait été construite. Lorsque j’ai montré / dévoilé le div en premier et ensuite construit la table alors que la table était visible, cela a fonctionné.

Ainsi, DataTables ne peut pas dimensionner les colonnes dans un div masqué, probablement parce qu’il obtient une largeur de colonne de 0px sur le backend lorsque la table est masquée.

Il suffit d’envelopper l’élément de balise de tableau dans un div avec le dépassement automatique et la position relative. Il fonctionnera en chrome et IE8. J’ai ajouté la hauteur 400px afin de garder la taille de la table fixe même après le rechargement des données.

 table = $('
').appendTo('#candidati').dataTable({ //"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW //"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW //"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW //"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW "sAjaxSource": "datass.php", "aoColumns": colf, "bJQueryUI": true, "sPaginationType": "two_button", "bProcessing": true, "bJQueryUI":true, "bPaginate": true, "table-layout": "fixed", "fnServerData": function(sSource, aoData, fnCallback, oSettings) { aoData.push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filsorting oSettings.jqXHR = $.ajax({ "dataType": 'JSON', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback }); }, "fnRowCallback": function(nRow, aData, iDisplayIndex) { $(nRow).click(function() { $(".row_selected").removeClass("row_selected"); $(this).addClass("row_selected"); //mostra il detaglio showDetail(aData.CandidateID); }); }, "fnDrawCallback": function(oSettings) { }, "aaSorting": [[1, 'asc']] }).wrap("
"); //correzione per il disallineamento dello header

Un simple css sur les en-têtes devrait le faire pour vous.

 #rates_info, #rates_paginate { float: left; width: 100%; text-align: center; } 

Je ne peux pas promettre que ça marchera comme si je n’avais pas vu votre code HTML, mais essayez-le et si ce n’est pas le cas, vous pouvez poster votre code HTML et le mettre à jour.

Voir cette solution . Il peut être résolu avec un événement de défilement de fenêtre déclenché une seule fois.

Je faisais face au même problème. J’ai ajouté la propriété scrollX: true pour le dataTable et cela a fonctionné. Il n’y a pas besoin de changer le CSS pour datatable

 jQuery('#myTable').DataTable({ "fixedHeader":true, "scrollY":"450px", "scrollX":true, "paging": false, "ordering": false, "info": false, "searching": false, "scrollCollapse": true }); 

Je sais que c’est vieux, mais je me suis juste heurté au problème et je n’ai pas trouvé de solution idéale. J’ai donc décidé d’utiliser quelques js pour obtenir la hauteur de scrollBody, par rapport à la hauteur des tables. Si le scrollBody est plus petit que la table, j’augmente la largeur des tables de 15px pour tenir compte de la barre de défilement. Je mets cela aussi sur l’événement de redimensionnement, de sorte que cela fonctionne lorsque mon conteneur change de taille:

 const tableHeight = $('#' + this.options.id).height(); const scrollBodyHeight = $('#' + this.options.id).closest('.dataTables_scrollBody').height(); if (tableHeight > scrollBodyHeight) { $('#' + this.options.id).closest('.dataTables_scrollBody').css({ width: "calc(100% + 15px)", }) } else { $('#' + this.options.id).closest('.dataTables_scrollBody').css({ width: "100%", }) } 

$ (‘. DataTables_sort_wrapper’). Trigger (“click”);

Malheureusement, aucune de ces solutions n’a fonctionné pour moi. Peut-être, en raison de la différence d’initialisation de nos tables, nous avons des résultats différents. Il est possible que l’une de ces solutions fonctionne pour quelqu’un. En tout cas, je voulais partager ma solution, juste au cas où quelqu’un serait toujours préoccupé par ce problème. C’est un peu piraté, mais ça marche pour moi, puisque je ne change pas la largeur de la table plus tard.

Après avoir chargé la page et cliqué sur l’en-tête, de manière à ce qu’il se développe et s’affiche normalement, j’inspecte l’en-tête du tableau et enregistre la largeur de la div .dataTables_scrollHeadInner . Dans mon cas, c’est 715px , par exemple. Ajoutez ensuite cette largeur à css:

 .dataTables_scrollHeadInner { width: 715px !important; } 

Ma solution a été d’append ceci: …

 initComplete () {     this.api (). columns (). header (). each ((el, i) => {         $ (el) .attr ('style', 'min-width: 160px;')     }); }, 

et ça a l’air bien.

La réponse de Gyrocode.com au problème était totalement correcte mais sa solution ne fonctionnera pas dans tous les cas. Une approche plus générale consiste à append les éléments suivants en dehors de votre document. Fonction:

 $(document).on( 'init.dt', function ( e, settings ) { var api = new $.fn.dataTable.Api( settings ); window.setTimeout(function () { api.table().columns.adjust().draw(); },1); } ); 

Ajouter une largeur fixe pour la table de conteneur

JS:

 otableCorreo = $("#indexTablaEnvios").DataTable({ "fnInitComplete": function (oSettings, json) { $(otableCorreo.table().container()).addClass("tablaChildren"); }, }); 

CSS:

 .tablaChildren { width: 97%; } 

J’ai eu un problème similaire. Je créerais des tables dans des panneaux extensibles / pliables. Tant que les tables étaient visibles, pas de problème. Mais si vous avez réduit un panneau, redimensionné le navigateur, puis développé, le problème était là. Je l’ai corrigé en plaçant les éléments suivants dans la fonction de clic pour l’en-tête du panneau, chaque fois que cette fonction élargissait le panneau:

  // recalculate column widths, because they aren't recalculated when the table is hidden' $('.homeTable').DataTable() .columns.adjust() .responsive.recalc(); 

Comme Gyrocode.com l’a dit: “Très probablement, votre table est initialement cachée, ce qui empêche jQuery DataTables de calculer la largeur des colonnes.”

J’ai eu ce problème aussi et résolu par juste initier la dataTable après avoir montré la div

Par exemple

 $('#my_div').show(); $('#my_table').DataTable(); 

Utilisez ceci: Remplacez votre nom modal, effacez vos données et chargez

 $('#modalCandidateAssessmentDetail').on('shown.bs.modal', function (e) { }); 

Le problème est que le tableau de données est appelé avant que le tableau de données ne soit dessiné sur le DOM, utilisez set time out avant d’appeler le tableau de données.

 setTimeout(function(){ var table = $('#exampleSummary').removeAttr('width').DataTable( { scrollY: "300px", scrollX: true, scrollCollapse: true, paging: true, columnDefs: [ { width: 200, targets: 0 } ], fixedColumns: false } ); }, 100);