wake-up-neo.net

Feste DataTables-Header, die mit Spalten in breiten Tabellen falsch ausgerichtet sind

Problem

Wenn Sie die Variablen sScrollX, sScrollXInner und/oder sScrollY verwenden, um eine feste Headertabelle mit Bildlauf für den inneren Inhalt zu erhalten, werden die Kopfzeilen der Tabelle in Chrome und IE nicht mehr mit dem Rest des Körpers ausgerichtet. Firefox hingegen zeigt sie perfekt an.

Soweit ich weiß, tritt dieses Problem bei Verwendung der Version 1.9.4 nur auf, wenn viele Daten mit schwankenden Breiten vorliegen und wenn Wörter, die sehr lang/nicht umschreibbar sind, in denselben Spalten wie kleine Wörter zusammengefasst sind. Außerdem muss die betreffende Tabelle ziemlich breit sein.

All diese Faktoren werden in dieser Geige demonstriert:

Ausgabe

Chrome:
 Chrome Screenshot

IE:
 IE9 Screenshot

Firefox
 Firefox Screenshot

Lösungsvorschläge

Diese Lösungen wurden bereits vorgeschlagen, hatten jedoch keine Auswirkungen auf meine Implementierung. Aufgrund einiger dieser Vorschläge habe ich eine reine Vanilla-Demo erstellt, um sicherzustellen, dass kein anderer Code zu diesem Effekt beiträgt.

  • alle meine CSS deaktivieren/entfernen
  • setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
  • aufruf von oTable.fnFilter( "x",0 ) und oTable.fnFilter( "",0 ) in dieser Reihenfolge
  • "sScrollXInner": "100%"
  • alle Breiten loswerden

Die einzige Lösung, die ich für die falsch ausgerichteten Header gefunden habe, war das Entfernen von sScrollX und sScrollY. Dies kann jedoch nicht als Lösung gewertet werden, da Sie die Bildlauffunktion für feste Header/inneren Inhalt verlieren. Es ist also leider ein vorübergehender Hack, kein Fix!

Hinweis

Zum Bearbeiten/Spielen mit der neuesten Geige .

Ich habe verschiedene Kombinationen ausprobiert, die im Revisionsverlauf der Geige zu finden sind, indem ich den Link http://jsfiddle.net/pratik136/etL73/#REV# verwende, wobei 1 <= #REV# <= 12

Geschichte

StackO
Diese Frage wurde bereits gestellt: jQuery Datatables Header falsch ausgerichtet mit vertikalem Bildlauf
aber der entscheidende Unterschied ist, dass das OP dieser Frage erwähnte, dass es in der Lage war, das Problem zu beheben, wenn alle CSS entfernt wurden, was in meinem Fall nicht stimmt, und ich habe ein paar Permutationen ausprobiert, daher dachte ich über die Frage nach einer Umbuchung würdig.

Extern
Dieses Problem wurde auch im DataTables-Forum gemeldet:

Dieses Problem hat mich verrückt gemacht! Bitte tragen Sie Ihre Gedanken bei!

jquerydatatables
52
bPratik

EDIT: Siehe die neuesten Fiddle mit "Fixed Header": 

Die Fiddle .

Eine der Lösungen ist, das Scrollen selbst zu implementieren, anstatt das DataTables-Plugin für Sie erledigen zu lassen.

Ich habe dein Beispiel genommen und die sScrollX-Option auskommentiert. Wenn diese Option nicht vorhanden ist, fügt das DataTables-Plugin die Tabelle einfach in einem Container-Div ein. Diese Tabelle wird sich aus dem Bildschirm heraus erstrecken, um zu beheben, dass wir sie in ein div mit der erforderlichen Breite und einem Überlauf-Eigenschaftssatz einfügen können. Dies ist genau das, was die letzte jQuery-Anweisung ausführt. Sie umschließt die vorhandene Tabelle in ein 300px breites div. Sie müssen wahrscheinlich nicht die Breite für das div der Umhüllung festlegen (in diesem Beispiel 300px). Ich habe sie hier, damit der Clipping-Effekt leicht sichtbar wird. Und seien Sie nett, vergessen Sie nicht, diesen Inline-Stil zu ersetzen mit einer Klasse 

$(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

Das Folgende ist ein Weg, um eine feste Kopftabelle zu erhalten, ich weiß nicht, ob es für Ihren Zweck ausreicht . Änderungen sind:

  1. verwenden Sie "bScrollCollapse" anstelle von "sScrollXInner".
  2. verwenden Sie kein Fieldset, um die Tabelle zu umbrechen 
  3. fügen Sie eine "div.box" CSS-Klasse hinzu

Es scheint voll auf meinem lokalen Rechner zu funktionieren, aber es funktioniert nicht vollständig mit Fiddle . Es scheint, dass Fiddle eine CSS-Datei (normalize.css) hinzufügt, die das Plugin-CSS irgendwie gebrochen hat (ziemlich sicher, dass ich kann Vollständige Arbeit auch in Fiddle und Hinzufügen einiger CSS-Regeln, aber keine Zeit für weitere Untersuchungen.

Mein Code-Snippet befindet sich unten. Ich hoffe, das kann helfen.

<!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

Ich habe das gleiche Problem auf IE9.

Ich werde nur ein RegExp verwenden, um alle Leerzeichen zu entfernen, bevor der HTML-Code auf die Seite geschrieben wird.

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

Durch das Hinzufügen dieser beiden Zeilen wurde dieses Problem für mich behoben

"responsive": true,
"bAutoWidth": true

Es ist jetzt ein responsives Plugin verfügbar: https://datatables.net/extensions/responsive/ . Nach meiner Erfahrung habe ich jedoch festgestellt, dass es noch einige Fehler gibt. Es ist immer noch die beste Lösung, die ich bisher gefunden habe.

4
Ben Leitner

Löst die DataTable-Suchfunktion aus, nachdem DataTable mit einer leeren Zeichenfolge initialisiert wurde Es wird automatisch die falsche Ausrichtung von thead mit tbody angepasst.

$( 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

Der folgende Code hat funktioniert. Korrigiert das Problem bei I.E 9.0. Hoffe das hilft

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

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

Ich hatte das gleiche Problem und dieser Code löst es. Ich habe diese Lösung aus diesem Artikel erhalten, musste aber die Zeit für das Intervall anpassen, damit es funktioniert.

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

versuchen Sie dies, der folgende Code hat mein Problem gelöst

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

für weitere informationen verweisen wir auf Here .

1
Ah Hui

Für Bootstrap-Benutzer wurde dies für mich behoben:

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

Siehe Artikel hier

1
Sam

Wenn Sie scrollY verwenden möchten, verwenden Sie:

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

0
Victor Villacorta

Ich benutze dies für das automatische Ausblenden von Spalten gemäß den Spaltendaten, in diesem Fall manchmal der Struktur der Break-Tabelle. Ich löse dieses Problem mit diesem $ ($. fn.dataTable.tables (true)). DataTable (). columns.adjust (); und diese Funktion $ ('# datatableId'). on ('draw.dt', function () {}); Aufruf nach dem Laden der Daten.

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

Ich habe das gleiche Problem in meiner Anwendung behoben, indem ich untenstehenden Code in der css hinzugefügt habe.

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

Fügen Sie table-layout: fixed zum Stil Ihrer Tabelle (Attribut css oder style) hinzu.

Der Browser beendet seinen benutzerdefinierten Algorithmus, um Größenbeschränkungen aufzulösen.

Suchen Sie im Web nach Informationen zum Umgang mit Spaltenbreiten in einem festen Tabellenlayout (hier sind 2 einfache SO - Fragen: hier und hier )

Offensichtlich: Der Nachteil ist, dass sich die Breite Ihrer Spalten nicht an ihren Inhalt anpasst.

[Bearbeiten] Meine Antwort funktionierte, als ich das FixedHeader-Plugin verwendete, aber ein Beitrag im Forum der Datatabelle scheint zu zeigen, dass andere Probleme bei der Verwendung der Option sScrollX auftreten:

bAutoWidth und sWidth werden ignoriert, wenn sScrollX eingestellt ist (v1.7.5)

Ich werde versuchen, einen Weg zu finden, um das zu umgehen.

0
LeGEC

Nachdem ich alles versucht hatte, was ich konnte, fügte ich "autoWidth": true hinzu und es funktionierte für mich.

0
user3055896

Ich weiß, dass bereits eine Antwort markiert wurde, aber für jemanden mit ähnlichen Problemen, für den das Obige nicht funktioniert .. Ich benutze es in Verbindung mit dem Bootstrap-Thema.

Es gibt eine Zeile, die in der Datei dataTables.fixedHeader.js ... geändert werden kann. Das Standardlayout der Funktion sieht wie folgt aus.

    _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);
    },

ändere das 

    return $(this).width();

zu 

    return $(this).outerWidth();

outerWidth () ist eine Funktion, die in jquery.dimensions.js enthalten ist, wenn Sie eine neuere Version von Jquery verwenden. dh. jquery-3.1.1.js

die obige Funktion besteht darin, dass sie die th der ursprünglichen Tabelle abbildet und sie dann auf die "geklonte" Tabelle (fester Header) anwendet. In meinem Fall waren sie immer etwa 5px bis 8px, wenn sie falsch ausgerichtet waren. Es ist wahrscheinlich nicht die beste Lösung, aber es bietet eine Lösung für alle anderen Tabellen in der Lösung, ohne dass dies per Tabellendeklaration angegeben werden muss .. __ Es wurde bisher nur in Chrome getestet, sollte jedoch eine Entscheidungslösung für alle bieten Browser. 

0
BulletVictim

Ich habe das Spaltenproblem mit dem folgenden Konzept behoben

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