datatable jquery - en-tête de table largeur ne sont pas alignés avec le corps de la largeur

j'ai résolu ce problème en enveloppant la Table" dataTable " d'un divoverflow:auto:

.dataTables_scroll
{
    overflow:auto;
}

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

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

Ne pas utiliser sScrollX ou sScrollY, les supprimer et d'ajouter un div emballez - vous ce qui fait la même chose.

CAUSE

il est très probable que votre table est cachée au départ, ce qui empêche jQuery DataTables de calculer la largeur des colonnes.

SOLUTION

• si la table est dans l'élément repliable, vous devez ajuster les en-têtes lorsque l'élément repliable devient visible.

  par exemple, pour Bootstrap Collap plugin:

  $('#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 Tab plugin:

  $('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 FIXEDCOLUMNS EXTENSIONS

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 êtes en utilisant L'extension Responsive, vous devez appeler responsive.recalc() méthode API columns().adjust() méthode API. Voir extension réactive-points d'arrêt incorrects exemple.

• si vous utilisez L'extension Scroller, vous devez appeler scroller.measure() méthode API au lieu decolumns().adjust() méthode API. Voir extension du rouleau compresseur-largeur de colonne incorrecte ou manquante données exemple.

• si vous utilisez FixedColumns extension, vous devez appeler fixedColumns().relayout() méthode API columns().adjust() méthode API. Voir FixedColumns extension Incorrecte des largeurs de colonne exemple.

liens

Voir jQuery DataTables – largeur de la Colonne de problèmes avec Bootstrap onglets pour les solutions aux problèmes les plus courants avec colonnes dans les DataTables jQuery lorsque la table est initialement cachée.

aucune des solutions ci-dessus n'a fonctionné pour moi mais j'ai finalement trouvé une solution qui a fonctionné.

ma version de ce problème a été causée par un fichier CSS tiers qui a placé le 'box-sizing' à une valeur différente. J'ai été en mesure de résoudre le problème sans y apporter 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");

Espérons 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 fnadjustcolumzing (false) à la fin de votre appel de datatables. modifié le code ci-dessus.

Discussion sur la Colonne de dimensionnement de la question

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

puis "autoWidth": true

aucune des solutions ci-dessus n'a fonctionné pour moi, donc je vais poster ma solution: je chargeais la table dans une div cachée et puis montrant la div après que la table a été construite. Quand j'ai montré / unhid la div d'abord et ensuite construit la table tandis que la table était visible, il a fonctionné.

ainsi les DataTables ne peuvent pas dimensionner les colonnes dans un div caché, probablement parce qu'il obtient une largeur de colonne de 0px sur le dos quand la table est cachée.

en reliant la réponse de Mike Ramsey j'ai finalement trouvé que la table était initialisée avant que le DOM ait chargé.

pour corriger ceci, je mets la fonction d'initialisation dans l'endroit suivant:

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

j'ai réparé, je 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()

simplement envelopper l'élément d'étiquette de table dans un div avec le débordement automatique et la position relative. Il fonctionnera en chrome et IE8. J'ai ajouté hauteur 400px afin de garder la taille de la table fixe même après avoir rechargé 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

quelques css simples sur les en-têtes devraient faire cela pour vous.

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

Je ne peux pas promettre que cela fonctionnera comme c'est parce que je n'ai pas vu votre html mais essayez-le et si ce n'est pas le cas, alors vous pouvez poster votre html et je le mettrai à jour.

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

je faisais face à la même question. J'ai ajouté la propriété scrollX: true pour le dataTable et cela a fonctionné. Il n'est pas nécessaire 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 j'ai juste rencontré le problème et je n'ai pas trouvé une bonne solution. Donc, j'ai décidé d'utiliser quelques js pour obtenir la hauteur du scrollBody, par rapport à la hauteur des tables. Si le scrollBody est plus petit que la table, alors j'augmente la largeur des tables de 15px pour tenir compte de la barre de défilement. J'ai aussi configuré cela sur resize event, 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 dans l'initialisation de nos tableaux, nous avons des résultats différents. Il est possible que l'une de ces solutions fonctionne pour quelqu'un. Bref, je voulais partager ma solution, juste au cas où quelqu'un serait encore troublé par ce problème. Il est un peu hackish, cependant, mais il fonctionne 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 sorte que il se dilate et montre normalement, j'inspecte l'en-tête de la table et enregistre la largeur de la .dataTables_scrollHeadInner div. Dans mon cas, c'est 715px, par exemple. Puis ajoutez cette largeur à css:

.dataTables_scrollHeadInner
{
  width: 715px !important;
}

ma solution était d'ajouter ceci: ...

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

...

et il ont l'air bien.

Gyrocode.com réponse au problème était tout à fait correcte, mais sa solution ne fonctionnera pas dans tous les cas. Une approche plus générale est d'ajouter ce qui suit à l'extérieur de votre document.prêt de la 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 container

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 tableaux étaient visibles, aucun problème. Mais si vous effondré panneau, redimensionné le navigateur, puis élargi, 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 de panneau, chaque fois que cette fonction a étendu le panneau:

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

comme Gyrocode.com dit "très probablement votre table est cachée initialement qui empêche jQuery DataTables de calculer les largeurs de colonne."

j'ai eu ce problème aussi et l'ai résolu en juste init le datable après avoir montré le div

Par exemple

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

Utilisez ceci: remplacez votre nom modal, effacez votre datatable et chargez

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

});

la table de données est appelée avant que la table de données soit dessinée sur DOM,utilisez set time out avant d'appeler 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);

ajouter à votre script à la page:

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