datatable jquery – Tabellenkopfbreite nicht an Körperbreite ausgerichtet

Lesezeit: 3 Minuten

kishore

Ich verwende jQuery-Datentabellen. Beim Ausführen der Anwendung ist die Header-Breite nicht an der Body-Breite ausgerichtet. Aber wenn ich auf die Kopfzeile klicke, wird sie an der Körperbreite ausgerichtet, aber selbst dann gibt es eine leichte Fehlausrichtung. Dieses Problem tritt nur im IE auf.

JSFiddle

So sieht es aus, wenn die Seite geladen wird:

Nach Klick auf die Überschrift:

Mein Datatable-Code:

$("#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 ist meine Tabellen-ID.
Könnte mir jemand dabei helfen? Vielen Dank im Voraus.

Könnten Sie ein jsFiddle erstellen, damit wir das Problem sehen und testen können? jsfiddle.net

– vgl

21. Juni 13 um 14:37 Uhr
Ich kann kein jsfiddle erstellen. In meinem Code sind einige DB-abhängig.

– Kishore

21. Juni 13 um 14:40 Uhr
könnten Sie die Tabelle mit lokalen Daten verspotten? mit dem aaData-Parameter?

– vgl

21. Juni 13 um 14:41 Uhr
Deshalb habe ich den Screenshot angehängt, damit Sie erraten können, wo es schief geht.

– Kishore

21. Juni 13 um 14:42 Uhr
cfs : Kannst du das anhand des Screenshots erraten? Ich habe auch den Datatable-Code hinzugefügt

– Kishore

21. Juni 13 um 14:43 Uhr

Sharjeel Ahmed

Ich habe dieses Problem gelöst, indem ich die Tabelle “dataTable” mit a umschloss div mit overflow:auto:

.dataTables_scroll
{
    overflow:auto;
}

und füge dieses JS nach deinem hinzu dataTable Initialisierung:

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

Nicht verwenden sScrollX oder sScrollYentfernen Sie sie und fügen Sie a hinzu div Wrapper selbst, der dasselbe tut.

Sie müssen auch position:relative hinzufügen, sonst bleiben die Beschriftungen im Header fixiert, ohne dem Scrollen des Wrappers zu folgen.

– alexroat

2. Januar 14 um 10:43 Uhr
Ich habe mehr als 10 Lösungsratschläge ausprobiert, aber keiner davon hat mir geholfen, außer diesem. Danke!

– Fatichan Gasimow

15. Februar 19 um 12:35 Uhr
Ich deaktiviere einfach sScrollX, sScrollY, dann funktioniert es

– Larry Cai

17. April 19 um 9:15 Uhr
@LarryCai hat den Tag gerettet. Ich habe so viele Dinge und Vorschläge ausprobiert und alles, was ich tun musste, war, Scrolly zu kommentieren. Danke.

– NoBullMan

17. Oktober 20 um 16:01 Uhr
Vielen Dank…

– Matías Gallegos

14. Dezember 21 um 19:38 Uhr

Meinst du Option hinzufügen oder einen Namen für Klassenattr hinzufügen?

– Liao San Kai

8. August 14 um 7:57 Uhr
@JaxSwagger – Geben Sie einfach eine Nachricht ein, die besagt: “Diese Seite verwendet ein defektes Plugin, das nur in IE funktioniert” lmao

– Christine

14. Juli 16 um 21:19 Uhr
Du hast meinen Tag versüßt, vielen Dank! Und @Shaggy , füge einfach eine Browsererkennung hinzu 😉

– Ritooon

19. August 19 um 15:45 Uhr

Ich habe fest, Arbeit für mich.

var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

Oder

var table = $('#example').DataTable();
table.columns.adjust().draw();

Bezug: https://datatables.net/reference/api/columns.adjust()

Welche Art von Element ist “Container”?

– Spencer Sullivan

17. Juli 19 um 16:10 Uhr

Hamza Khan

Verwenden Sie diese Befehle

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

Welche Art von Element ist “Container”?

– Spencer Sullivan

17. Juli 19 um 16:10 Uhr

Friedrich Widerberg

Das Problem ist, dass die Datentabelle aufgerufen wird, bevor die Datentabelle auf DOM gezeichnet wird. Verwenden Sie das festgelegte Timeout, bevor Sie die Datentabelle aufrufen.

setTimeout(function(){ 
    var table = $('#exampleSummary').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);

7587800cookie-checkdatatable jquery – Tabellenkopfbreite nicht an Körperbreite ausgerichtet

#Abfrage #Ausrichtung #Datentabellen