jquery datatable - la largeur de l'en-tête de la table n'est pas alignée sur la largeur du corps
J'utilise des tables 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 lorsque je clique sur l'en-tête, celui-ci s'aligne sur la largeur du corps, mais il y a quand même un léger désalignement. Ce problème se produit uniquement dans IE.
Voici à quoi ça ressemble quand la page est chargée:
Après avoir cliqué sur l'en-tête:
Mon code datatable:
$("#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
]
});
rates est mon identifiant de table.
Quelqu'un pourrait-il m'aider avec cela? Merci d'avance.
Trouvé la solution:
Ajoutée table-layout:fixed à la table. Et ouvert l'application en mode IE.
CAUSE
Il est fort probable que votre table soit initialement masquée, ce qui empêche jQuery DataTables de calculer la largeur des colonnes.
SOLUTION
Si la table est dans l'élément réductible, vous devez ajuster les en-têtes lorsque l'élément compressible devient visible.
Par exemple, pour Bootstrap plugin Collapse:
$('#myCollapsible').on('shown.bs.collapse', function () { $($.fn.dataTable.tables(true)).DataTable() .columns.adjust(); });Si la table est dans l'onglet, vous devez ajuster les en-têtes lorsque l'onglet devient visible.
Par exemple, pour Bootstrap plugin 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 tous les tableaux de la page. Voir columns().adjust() Méthodes API pour plus d'informations.
RESPONSIVE, SCROLLER OR EXTENSIONS FIXEDCOLUMNS
Si vous utilisez des extensions Responsive, Scroller ou FixedColumns, vous devez utiliser des méthodes d'API supplémentaires pour résoudre ce problème.
Si vous utilisez l'extension Responsive, vous devez appeler
responsive.recalc()méthode API en plus à -columns().adjust()méthode de l'API. Voir Extension sensible - Points d'arrêt incorrects exemple.Si vous utilisez une extension Scroller, vous devez appeler
scroller.measure()méthode API au lieu de -columns().adjust()méthode de l'API. Voir Extension Scroller - Largeurs de colonnes incorrectes ou données manquantes exemple.Si vous utilisez l'extension FixedColumns, vous devez appeler
fixedColumns().relayout()la méthode de l'API en plus à -columns().adjust()méthode de l'API. Voir extension FixedColumns - Largeurs de colonne incorrectes exemple.
LIENS
Voir jQuery DataTables - Problèmes de largeur de colonne avec Bootstrap tabs =) == pour connaître les solutions aux problèmes les plus courants liés aux colonnes dans jQuery DataTables lorsque la table est initialement masquée.
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 votre initialisation dataTable:
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
N'utilisez pas sScrollX ou sScrollY, supprimez-les et ajoutez vous-même un wrapper div qui fait la même chose.
J'ai réparé, 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, mais j'ai finalement trouvé une solution qui le faisait.
Ma version de ce problème était due à un fichier CSS tiers qui définissait le "dimensionnement de la boîte" sur une valeur différente. J'ai pu résoudre le problème sans affecter les 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 datatables. code modifié ci-dessus.
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);
Enveloppez simplement l’élément tag de la table dans une div avec débordement auto et position relative. Cela fonctionnera dans chrome et IE8. J'ai ajouté une hauteur de 400px afin de conserver la taille de la table, même après le rechargement des données.
table = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></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 filtri
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("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header
Aucune des solutions ci-dessus ne fonctionnant pour moi, je vais donc poster ma solution: je chargeais la table dans un div caché, puis je la montrerais après la construction de la table. Quand j'ai d'abord montré/divisé la div, puis construit la table alors que la table était visible, cela a fonctionné.
DataTables ne peut donc pas dimensionner les colonnes dans une div masquée, probablement parce qu’il obtient une largeur de colonne de 0 px sur le backend lorsque la table est masquée.
Comme le disait Gyrocode.com, "votre table est probablement cachée au départ, ce qui empêche jQuery DataTables de calculer la largeur des colonnes".
J'ai eu ce problème aussi et je l'ai résolu en initiant simplement le dataTable après avoir montré le div
Par exemple
$('#my_div').show();
$('#my_table').DataTable();
Quelques CSS simples sur les en-têtes devraient le faire pour vous.
#rates_info, #rates_paginate
{
float: left;
width: 100%;
text-align: center;
}
Je ne peux pas vous promettre que cela fonctionnera tel quel parce que je n'ai pas vu votre code HTML, mais essayez-le. Dans le cas contraire, vous pourrez poster votre code HTML et je le mettrai à jour.
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
});
issue is la table de données est appelée avant que la table de données ne soit dessinée sur DOM, utilisez le délai d'attente défini avant l'appel de la table 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);
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. Quoi qu'il en soit, je voulais partager ma solution, au cas où quelqu'un serait toujours préoccupé par ce problème. C'est un peu hackish, mais ça marche pour moi, car je ne change pas la largeur du tableau plus tard.
Après avoir chargé la page et cliqué sur l'en-tête, de manière à l'agrandir et à l'afficher normalement, j'inspecte l'en-tête du tableau et enregistre la largeur du .dataTables_scrollHeadInner div. Dans mon cas c'est 715px, par exemple. Ajoutez ensuite cette largeur à css:
.dataTables_scrollHeadInner
{
width: 715px !important;
}
La réponse de Gyrocode.com au problème était totalement correcte, mais sa solution ne fonctionnerait pas dans tous les cas. Une approche plus générale consiste à ajouter les éléments suivants en dehors de votre fonction document.ready:
$(document).on( 'init.dt', function ( e, settings ) {
var api = new $.fn.dataTable.Api( settings );
window.setTimeout(function () {
api.table().columns.adjust().draw();
},1);
} );
Ma solution était d'ajouter ceci: ...
initComplete () {
this.api (). columns (). header (). each ((el, i) => {
$ (el) .attr ('style', 'min-width: 160px;')
});
},
...
et ça a l'air bien.
Utilisez ces commandes
$('#rates').DataTable({
"scrollX": true,
"sScrollXInner": "100%",
});
Ajouter une largeur fixe pour la table conteneur
JS:
otableCorreo = $("#indexTablaEnvios").DataTable({
"fnInitComplete": function (oSettings, json) {
$(otableCorreo.table().container()).addClass("tablaChildren");
},
});
CSS:
.tablaChildren {
width: 97%;
}
Je sais que c'est vieux, mais j'ai juste rencontré le problème et je n'ai pas trouvé de bonne solution. J'ai donc décidé d'utiliser des js pour obtenir la hauteur de scrollBody, par rapport à la hauteur des tables. Si scrollBody est plus petit que la table, j'augmente la largeur des tables de 15 pixels pour tenir compte de la barre de défilement. J'ai également paramétré cet événement sur resize pour qu'il 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%",
})
}
J'ai eu un problème similaire. Je créerais des tableaux dans des panneaux extensibles/réductibles. 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 ce qui suit dans la fonction de clic pour l'en-tête du panneau, chaque fois que cette fonction développait le panneau:
// recalculate column widths, because they aren't recalculated when the table is hidden'
$('.homeTable').DataTable()
.columns.adjust()
.responsive.recalc();
Utilisez ceci: Remplacez votre nom de modal, effacez votre datatable et chargez
$('#modalCandidateAssessmentDetail').on('shown.bs.modal', function (e) {
});
$ ('. DataTables_sort_wrapper'). Trigger ("clic");
ajouter à votre script dans la page:
$( window ).resize(function() {
var table = $('#tableId').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();
});
Voir cette solution . Il peut être résolu avec un événement de défilement de fenêtre qui ne se déclenche qu’une fois.
vous n'avez pas besoin de trouver différentes béquilles, la largeur de l'en-tête de la table n'est pas alignée sur le corps, car, du fait que la table n'a pas eu le temps de renseigner les données, setTimeout
setTimeout(function() {
//your datatable code
}, 1000);