web-dev-qa-db-fra.com

Les en-têtes fixes de DataTables sont mal alignés avec les colonnes de larges tables

Problème

Lorsque vous utilisez sScrollX, sScrollXInner et/ou sScrollY pour obtenir un tableau d'en-tête fixe avec son contenu de défilement interne, les en-têtes du tableau ne sont plus alignés sur le reste du corps dans Chrome et IE. Firefox, en revanche, les affiche parfaitement.

Pour autant que je sache, dans la version 1.9.4, ce problème ne se produit que s'il existe beaucoup de données dont les largeurs varient, et dont les mots très longs/non traitables sont combinés dans les mêmes colonnes que les plus petites. De plus, le tableau en question doit être assez large.

Tous ces facteurs sont démontrés dans ce violon :

Sortie

Chrome:
 Chrome Screenshot

IE:
 IE9 Screenshot

Firefox
 Firefox Screenshot

Solutions suggérées

Ces solutions ont déjà été suggérées mais n'ont eu aucun effet sur mon implémentation. En raison de certaines de ces suggestions, j’ai mis en place une démo «plain plain» vanilla, car je voulais être sûr qu’aucun autre code ne contribuerait à cet effet.

  • éteindre/supprimer tous mes css
  • setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
  • appelant oTable.fnFilter( "x",0 ) et oTable.fnFilter( "",0 ) dans cet ordre
  • "sScrollXInner": "100%"
  • se débarrasser de toutes les largeurs

La seule solution que j'ai trouvée pour les en-têtes mal alignés supprimait sScrollX et sScrollY, mais cela ne peut pas être compté comme une solution si vous perdez la fonctionnalité de défilement fixe de contenu intérieur/contenu interne. Donc, malheureusement, c'est un hack temporaire, pas une solution!

Remarque

Pour éditer/jouer avec le dernier fiddle .

J'ai essayé diverses combinaisons qui peuvent être observées dans l'historique de révision du violon en utilisant le lien http://jsfiddle.net/pratik136/etL73/#REV# où 1 <= #REV# <= 12

L'histoire

StackO
Cette question a déjà été posée: En-tête jQuery Datatables mal aligné avec un défilement vertical
mais la différence essentielle réside dans le fait que le PO de cette question a indiqué qu’il était capable de résoudre le problème si tous les CSS étaient supprimés, ce qui est faux dans mon cas et j’ai essayé quelques permutations. digne d'un repost.

externe
Ce problème a également été signalé sur le forum DataTables:

Ce problème m'a rendu fou! S'il vous plaît contribuer vos pensées!

jquerydatatables
52
bPratik

EDIT: Voir le dernier Fiddle avec "en-tête fixe": 

Le Fiddle .

Une des solutions consiste à implémenter le défilement vous-même au lieu de laisser le plug-in DataTables le faire pour vous.

J'ai pris votre exemple et commenté l'option sScrollX. Lorsque cette option n'est pas présente, le plug-in DataTables mettra simplement votre table en l'état dans un conteneur div. Par conséquent, cette table va s'étendre hors de l'écran pour nous permettre de la placer dans une div avec la largeur requise et un ensemble de propriétés de débordement (c'est exactement ce que fait la dernière instruction jQuery): elle encapsule la table existante dans une div de 300 pixels de large. Vous n'aurez probablement pas besoin de régler la largeur de la division d'habillage (300px dans cet exemple), je l'ai ici pour que l'effet de détourage soit facilement visible . Et soyez gentil, n'oubliez pas de remplacer ce style en ligne avec une classe. 

$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
    "iDisplayLength": -1,
    "bPaginate": true,
    "iCookieDuration": 60,
    "bStateSave": false,
    "bAutoWidth": false,
    //true
    "bScrollAutoCss": true,
    "bProcessing": true,
    "bRetrieve": true,
    "bJQueryUI": true,
    //"sDom": 't',
    "sDom": '<"H"CTrf>t<"F"lip>',
    "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    //"sScrollY": "500px",
    //"sScrollX": "100%",
    "sScrollXInner": "110%",
    "fnInitComplete": function() {
        this.css("visibility", "visible");
    }
});

var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});
12
Ruslans Uralovs

Voici un moyen d’obtenir un tableau d’en-tête fixe, mais je ne sais pas si ce sera suffisant pour vous. Les changements sont les suivants:

  1. utilisez "bScrollCollapse" au lieu de "sScrollXInner"
  2. n'utilisez pas fieldset pour envelopper la table 
  3. ajouter une classe css "div.box"

Cela semble fonctionner complètement sur ma machine locale, mais pas complètement avec Fiddle . Il semble que Fiddle ajoute un fichier CSS (normalize.css) qui a en quelque sorte cassé le fichier CSS faire fonctionner pleinement aussi dans Fiddle en ajoutant quelques règles claires CSS, mais pas avoir le temps d'enquêter plus loin maintenant)

Mon extrait de code de travail est ci-dessous . J'espère que cela peut vous aider.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
  <script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>

 <style type='text/css'>
       div.box {
       height: 100px;
       padding: 10px;
       overflow: auto;
       border: 1px solid #8080FF;
       background-color: #E5E5FF;
   }

  .standard-grid1, .standard-grid1 td, .standard-grid1 th {
    border: solid black thin;
   }
</style>

<script type='text/javascript'> 
$(window).load(function(){
$(document).ready(function() {
    var stdTable1 = $(".standard-grid1").dataTable({
        "iDisplayLength": -1,
        "bPaginate": true,
        "iCookieDuration": 60,
        "bStateSave": false,
        "bAutoWidth": false,
        //true
        "bScrollAutoCss": true,
        "bProcessing": true,
        "bRetrieve": true,
        "bJQueryUI": true,
        "sDom": '<"H"CTrf>t<"F"lip>',
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        "sScrollX": "100%",
        //"sScrollXInner": "110%",
        "bScrollCollapse": true,
        "fnInitComplete": function() {
            this.css("visibility", "visible");
        }
    });
});
});

</script>


</head>
<body>
<div>
    <table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
        <thead>
          <!-- put your table header HTML here -->
       </thead>
       <tbody>
          <!-- put your table body HTML here -->
        </tbody>
    </table>
</div>
</body>
</html>
12
Draykos

J'ai le même problème sur IE9.

Je vais juste utiliser un RegExp pour effacer tous les espaces avant d'écrire le code HTML sur la page.

var Tables=$('##table_ID').html();
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
Tables= Tables.replace(expr, '><');
$('##table_ID').html(Tables);
oTable = $('##table_ID').dataTable( {
  "bPaginate": false,
  "bLengthChange": false,
  "bFilter": false,
  "bSort": true,
  "bInfo": true,
  "bAutoWidth": false,
  "sScrollY": ($(window).height() - 320),
  "sScrollX": "100%",
  "iDisplayLength":-1,
  "sDom": 'rt<"bottom"i flp>'
} );
4
MR Kesavan

L'ajout de ces deux lignes a résolu ce problème pour moi

"responsive": true,
"bAutoWidth": true

Un plugin responsive est maintenant disponible: https://datatables.net/extensions/responsive/ . Cependant, dans mon expérience, j'ai constaté qu'il y avait encore quelques bugs. C'est toujours la meilleure solution que j'ai trouvée jusqu'à présent.

4
Ben Leitner

Déclenchez la fonction de recherche DataTable après l’initialisation de DataTable avec une chaîne vide. Il ajustera automatiquement le désalignement de thead avec tbody.

$( document ).ready(function()
{

    $('#monitor_data_voyage').DataTable( {
        scrollY:150,
        bSort:false,
        bPaginate:false,
        sScrollX: "100%",
        scrollX: true,
    } );

    setTimeout( function(){
       $('#monitor_data_voyage').DataTable().search( '' ).draw();
    }, 10 );

});
2
Divyanshu Rawat

Le code ci-dessous a fonctionné. Correction du problème sur I.E 9.0 atleast. J'espère que cela t'aides

var oTable =  $('#tblList').dataTable({
    "sScrollY": "320px",
    "bScrollCollapse": true,
    });

    setTimeout(function(){
        oTable.fnAdjustColumnSizing();
    },10);
2
Vishnoo Rath

J'ai eu le même problème et ce code le résout. J'ai eu cette solution à partir de cet article mais je devais ajuster l'heure sur l'intervalle pour que cela fonctionne.

setTimeout(function(){
        oTable.fnAdjustColumnSizing();
},50);
1
Earl

essayez ceci, le code suivant a résolu mon problème

table.dataTable tbody th,table.dataTable tbody td 
{
     white-space: nowrap;
}

pour plus d'informations, référez-vous ici .

1
Ah Hui

Pour les utilisateurs de bootstrap, cela a résolu le problème pour moi:

   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust()
      .fixedColumns().relayout();

Voir article ici

1
Sam

Si vous voulez utiliser scrollY, utilisez:

$ ('. DataTables_sort_wrapper'). Trigger ("clic");

0
Victor Villacorta

J'utilise ceci pour le masquage automatique des colonnes conformément aux données de la colonne, dans ce cas, parfois sa structure de table de rupture. Je résous ce problème avec ceci $ ($. fn.dataTable.tables (true)). DataTable (). columns.adjust (); et cette fonction $ ('# datatableId'). on ('draw.dt', function () {}); appel après le chargement de tabledata.

$('#datatableId').on('draw.dt', function () {
    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
})
0
Atul Baldaniya

J'ai corrigé le même problème dans mon application en ajoutant le code ci-dessous dans le fichier css -

.dataTables_scrollHeadInner
{
     width: 640px !important;
}
0
Sanchi Girotra

Ajoutez table-layout: fixed au style de votre table (attribut css ou style).

Le navigateur cessera d’appliquer son algorithme personnalisé pour résoudre les contraintes de taille.

Recherchez sur le Web des informations sur la gestion des largeurs de colonne dans un format de tableau fixe (voici 2 simples SO questions: ici et ici )

Évidemment: l'inconvénient sera que la largeur de vos colonnes ne s'adaptera pas à leur contenu.

[Modifier] Ma réponse a fonctionné lorsque j'ai utilisé le plugin FixedHeader, mais un message sur le forum de datatable semble indiquer que d'autres problèmes surviennent lors de l'utilisation de l'option sScrollX:

bAutoWidth et sWidth ignorés lorsque sScrollX est défini (v1.7.5)

Je vais essayer de trouver un moyen de contourner cela.

0
LeGEC

Après avoir essayé tout ce que je pouvais, j'ai simplement ajouté "autoWidth": true et cela a fonctionné pour moi.

0
user3055896

Je sais qu’une réponse a déjà été signalée, mais pour une personne ayant des problèmes similaires pour lesquels ce qui précède ne fonctionne pas pour .. .. Je l’utilise en conjonction avec le thème bootstrap.

Il existe une ligne qui peut être modifiée dans le fichier dataTables.fixedHeader.js . La présentation par défaut de la fonction se présente comme suit.

    _matchWidths: function (from, to) {
        var get = function (name) {
            return $(name, from)
                .map(function () {
                    return $(this).width();
                }).toArray();
        };

        var set = function (name, toWidths) {
            $(name, to).each(function (i) {
                $(this).css({
                    width: toWidths[i],
                    minWidth: toWidths[i]
                });
            });
        };

        var thWidths = get('th');
        var tdWidths = get('td');

        set('th', thWidths);
        set('td', tdWidths);
    },

changer la 

    return $(this).width();

à 

    return $(this).outerWidth();

outerWidth () est une fonction contenue dans jquery.dimensions.js si vous utilisez une version plus récente de jquery. c'est à dire. jquery-3.1.1.js

la fonction ci-dessus mappe le th de la table d'origine, puis les applique à la table "clonée" (en-tête fixe) . dans mon cas, elles étaient toujours décalées d'environ 5 pixels à 8 pixels lorsqu'elles étaient mal alignées ... Probablement pas la meilleure solution mais fournit une solution à toutes les autres tables de la solution sans avoir à la spécifier par déclaration de table . Elle n’a été testée jusqu’à présent dans Chrome, mais elle devrait fournir une solution décisionnelle pour tous. les navigateurs. 

0
BulletVictim

J'ai résolu le problème de la colonne en utilisant le concept ci-dessous

$(".panel-title a").click(function(){
    setTimeout( function(){
           $('#tblSValidationFilerGrid').DataTable().search( '' ).draw();
        }, 10 );
})
0
SantoshK