93 votes

datatable jquery - la largeur de l'en-tête du tableau n'est pas alignée sur celle du corps du tableau

J'utilise jQuery datatables. Lors de l'exécution de l'application, la largeur de l'en-tête n'est pas alignée sur celle du corps. Mais lorsque je clique sur l'en-tête, il s'aligne sur la largeur du corps, mais même dans ce cas, il y a un léger désalignement. Ce problème ne se produit que dans IE.

JSFiddle

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

enter image description here

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

enter image description here

Mon code de table de données :

$("#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 l'identifiant de ma table.
Quelqu'un peut-il m'aider ? Merci d'avance.

0voto

Scott Points 108

J'ai eu un problème similaire. Je créais des tableaux dans des panneaux extensibles/collapables. Tant que les tableaux étaient visibles, aucun problème. Mais si vous réduisiez un panneau, redimensionniez le navigateur, puis le développiez, le problème était là. J'ai résolu le problème en plaçant le texte suivant dans la fonction de clic de l'en-tête du panneau, chaque fois que cette fonction développe le panneau :

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

0voto

Joseph Stalin Points 31

Utilisez ceci : Remplacez le nom de votre modale, videz votre table de données et chargez

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

});

0voto

Dimas Lazuardy Points 1

Ajouter à votre script en page :

$( window ).resize(function() {
    var table = $('#tableId').DataTable();
    $('#container').css( 'display', 'block' );
    table.columns.adjust().draw();
});

0voto

cullub Points 106

J'utilisais Bootstrap 4, et j'avais ajouté la classe table-sm à ma table. Ça a gâché le formatage. La suppression de cette classe a réglé le problème.


Si vous ne pouvez pas supprimer cette classe, je pense que l'ajouter via javascript à la table des en-têtes fonctionnerait. Datatables utilise deux tableaux pour afficher un tableau lorsque scrollX est activé -- un pour l'en-tête, et un pour le corps.

0voto

Ted Points 1146

J'ai eu ce problème pendant un certain temps et je me suis rendu compte que mon tableau était dessiné avant d'être affiché.

<div class="row">
    <div class="col-md-12" id="divResults">
    </div>
</div>        

function ShowResults(data) {
    $div.fadeOut('fast', function () {
        $div.html(data);
        // I used to call DataTable() here (there may be multiple tables in data)
        // each header's width was 0 and missaligned with the columns
        // the width woulld resize when I sorted a column or resized the window 
        // $div.find('table').DataTable(options);
        $div.fadeIn('fast', function () {
            Loading(false);
            $div.find('table').DataTable(options); // moved the call here and everything is now dandy!!!
        });
    });
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X