Problème d'alignement de l'en-tête des DataTables

Question

Problème

Lorsque vous utilisez le sScrollX , sScrollXInner et/ou sScrollY pour obtenir un tableau d'en-tête fixe dont le contenu interne défile, les en-têtes du tableau ne sont pas alignés avec le reste du corps dans Chrome et IE (7/8/9). En revanche, Firefox les affiche parfaitement.

Dans la dernière version 1.9.4, pour autant que je sache, ce problème ne se produit que lorsqu'il y a beaucoup de données avec des largeurs fluctuantes, et avec des mots très longs/imprévisibles combinés dans les mêmes colonnes que des petits. De plus, le tableau en question doit être d'une largeur raisonnable.

Tous ces facteurs sont démontrés dans ce violon : http://jsfiddle.net/pratik136/etL73/12/embedded/result/

Sortie

Chrome :

IE :

Firefox

Solutions suggérées

Ces solutions ont été suggérées auparavant mais n'ont pas eu d'effet. sur ma mise en œuvre. En raison de certaines de ces suggestions, j'ai mis en place une démo simple et propre car je voulais m'assurer qu'aucun autre code ne contribuait à cet effet.

• J'ai désactivé tous mes css, le problème disparaît.
• setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
• en 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 collecteurs mal alignés était d'enlever sScrollX et sScrollY mais cela ne peut pas être considéré comme une solution car vous perdez la fonctionnalité de défilement de l'en-tête fixe et du contenu interne. Malheureusement, il s'agit d'une solution temporaire et non d'une solution définitive !

Note

Pour éditer/jouer avec le dernier violon : http://jsfiddle.net/pratik136/etL73/12

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

Histoire

StackO
Cette question a déjà été posée : jQuery Datatables Header mal aligné avec le défilement vertical
mais la différence essentielle est que l'OP de cette question a mentionné qu'ils ont été en mesure de résoudre le problème si toutes les CSS ont été supprimées, ce qui est faux dans mon cas, et j'ai essayé quelques permutations, donc j'ai pensé que la question méritait un repost.

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

• http://datatables.net/forums/discussion/7395/sscrolly-and-sscrollx-broken/p1
• http://datatables.net/forums/discussion/7778/vertical-scrolling-messes-up-column-header-alignment#Item_1
• http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
• Mon rapport de bug : http://datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh#Item_1

Ce problème m'a rendu fou ! Faites-nous part de vos réflexions !

Answer 1

EDIT : Voir le dernier Fiddle avec "fixed header" : http://jsfiddle.net/ruslans_uralovs/zDaGk/

---

Le violon : http://jsfiddle.net/hDgHs/

L'une des solutions consiste à mettre en œuvre le défilement vous-même au lieu de laisser le plugin DataTables le faire pour vous.

J'ai pris votre exemple et commenté l'option sScrollX. Si cette option n'est pas présente, le plugin DataTables placera simplement votre tableau tel quel dans un div conteneur. Ce tableau va s'étirer hors de l'écran, donc pour corriger cela, nous pouvons le placer dans un div avec la largeur requise et une pré-propriété overflow définie - c'est exactement ce que fait la dernière déclaration jQuery - elle enveloppe le tableau existant dans un div de 300px de large. Vous n'aurez probablement pas besoin de définir la largeur de la div d'enveloppement (300px dans cet exemple), je l'ai placé ici pour que l'effet de coupure soit facilement visible. Et n'oubliez pas de remplacer le style en ligne par 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())});

Answer 2

Ce qui suit est une façon d'obtenir un tableau d'en-tête fixe, je ne sais pas si cela sera suffisant pour votre objectif. Les changements sont :

1. utilisez "bScrollCollapse" au lieu de "sScrollXInner".
2. ne pas utiliser fieldset pour envelopper la table
3. Ajouter une classe css "div.box".

Il semble fonctionner parfaitement sur ma machine locale, mais il ne fonctionne pas parfaitement avec Fiddle. Il semble que Fiddle ajoute un fichier css (normalize.css) qui, d'une manière ou d'une autre, a cassé le css du plugin (je suis sûr que je peux le faire fonctionner complètement aussi dans Fiddle en ajoutant quelques règles claires de css, mais je n'ai pas le temps de chercher plus loin maintenant).

Mon code de travail est le suivant. J'espère que cela pourra 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>

Answer 3

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

Je vais simplement utiliser une RegExp pour supprimer tous les espaces blancs avant d'écrire le 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>'
} );

Answer 4

Le code ci-dessous a fonctionné. Le problème a été corrigé sur I.E 9.0 au moins. J'espère que cela vous aidera

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

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

Answer 5

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

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

Cherchez sur le web des informations sur la gestion de la largeur des colonnes dans une mise en page de tableau fixe (voici 2 questions simples sur les SO : ici et ici )

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

---

[Edit] Ma réponse a fonctionné lorsque j'ai utilisé le plugin FixedHeader, mais un message sur le forum de la table de données semble indiquer que d'autres problèmes surviennent lorsque l'on utilise le plugin sScrollX option :

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

Je vais essayer de trouver un moyen de contourner ce problème.