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

Question

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 :

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

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.

Answer 1

CAUSE

Il est fort probable que votre tableau soit initialement masqué, ce qui empêche jQuery DataTables de calculer la largeur des colonnes.

SOLUTION

• Si le tableau se trouve dans l'élément rétractable, vous devez ajuster les en-têtes lorsque l'élément rétractable devient visible.

  Par exemple, pour le plugin 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 plugin 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 tous les tableaux de la page. Voir columns().adjust() pour plus d'informations.

EXTENSIONS RÉACTIVES, À DÉFILEMENT OU À COLONNES FIXES

Si vous utilisez les 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 responsive.recalc() Méthode API en outre a columns().adjust() Méthode API. Voir Responsive extension - Points d'arrêt incorrects exemple.

• Si vous utilisez l'extension Scroller, vous devez appeler scroller.measure() Méthode API au lieu de columns().adjust() Méthode API. Voir Extension Scroller - Largeur incorrecte des colonnes ou données manquantes exemple.

• Si vous utilisez l'extension FixedColumns, vous devez appeler fixedColumns().relayout() Méthode API en outre a columns().adjust() Méthode API. Voir Extension FixedColumns - Largeur incorrecte des colonnes exemple.

LIENS

Voir jQuery DataTables - Problèmes de largeur de colonne avec les onglets Bootstrap pour trouver des solutions aux problèmes les plus courants concernant les colonnes des tableaux de données jQuery lorsque le tableau est initialement caché.

Answer 2

J'ai résolu ce problème en enveloppant le tableau "dataTable" d'une balise div con overflow:auto :

.dataTables_scroll
{
    overflow:auto;
}

et ajouter ce JS après votre dataTable l'initialisation :

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

N'utilisez pas sScrollX ou sScrollY retirez-les et ajoutez un div vous-même qui fait la même chose.

Answer 3

J'ai trouvé la solution :

Ajouté table-layout:fixed à la table. Et j'ai ouvert l'application en mode IE.

Answer 4

J'ai réparé, ça marche 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()](https://datatables.net/reference/api/columns.adjust())

Answer 5

Utilisez ces commandes

$('#rates').DataTable({
        "scrollX": true,
        "sScrollXInner": "100%",
    });