Datatables Tabelle Header & Spalte Daten fehlausgerichtet bei Verwendung von "sScrollY"

Question

Probleme mit meiner Tabelle Header fehlausgerichtet, wenn ich "sScrollY" verwenden. Der Header richtet sich erst wieder aus, nachdem ich eine bestimmte Spalte durch Klicken auf einen der Header sortiert habe.

Nicht korrekt ausgerichtet.

nur Korrigierte Nachdem ich auf einer Art Überschrift klicken.

Mein Rahmen:

oTable = $('#userslist').dataTable({ 
    "bJQueryUI": true, 
    "bRetrieve": true, 
    "sScrollY": "150px", 
    "bAutoWidth" : true, 
    "bPaginate": false, 
    "sScrollX": "100%", 
    "sScrollXInner": "100%", 
    "sPaginationType": "full_numbers", 
    "bAutoWidth": false, 
    "sDom": '<"H"lfr>t<"F"<"useraccountbtn">>', 
    "aaData": datan, 
    "aoColumns": [ 
      { "mDataProp": "uid"}, 
      { "mDataProp": "fn" }, 
      { "mDataProp": "un" }, 
      { "mDataProp": "pw" }, 
      { "mDataProp": "em" }, 
      { "mDataProp": "ac" } 
     ] 
}); 

Ich habe auch versucht fnAdjustColumnSizing() die jeder Google-Suche darauf hindeutet, scheint zu sein, aber nicht für mich tun nichts.

Answer 1

Ich musste verzögern, wenn Daten geladen werden, da beim Laden der Seite die Bildlaufleiste und die Tabellenköpfe nicht falsch ausgerichtet angezeigt werden. Aber wenn ich es verzögere, sieht es die Bildlaufleiste und die Tabellenüberschrift passt perfekt zusammen.

<button onclick="delayload('loadusers()')">Load Table</button> 

function delayload(f){ 
    setTimeout(f,50) 
} 

function loadusers() { 

    oTable = $('#userslist').dataTable({ 
    "bJQueryUI": true, 
    "bRetrieve": true, 
    "sScrollY": "150px", 
    "bAutoWidth" : true, 
    "bPaginate": false, 
    "sScrollX": "100%", 
    "sScrollXInner": "100%", 
    "sPaginationType": "full_numbers", 
    "bAutoWidth": false, 
    "sDom": '<"H"lfr>t<"F"<"useraccountbtn">>', 
    "aaData": datan, 
    "aoColumns": [ 
     { "mDataProp": "uid"}, 
     { "mDataProp": "fn" }, 
     { "mDataProp": "un" }, 
     { "mDataProp": "pw" }, 
     { "mDataProp": "em" }, 
     { "mDataProp": "ac" } 
    ] 
    }); 
} 

Answer 2

Nun, wenn Sie sortieren oder filtern und der Inhalt der Tabelle in irgendeiner Weise ändern, wird FnDraw aufgerufen. Wenn ein zusätzliches fnDraw funktioniert (durch Klicken auf den Sortierkopf, nachdem die Tabelle geladen wurde) und nicht an bServerSide gebunden ist, kann ein zusätzlicher Aufruf von oTable.fnDraw() nicht schaden.

Answer 3

Ich habe auf diese Weise beheben;

den Tisch wickeln mit div und

CSS

overflow:auto; 
height: 400px; 
position:relative; 

entfernen

• „sScrollY“
• "sScrollX"