Datatables table header & column data misaligned w

问题:

Having problems with my table header becoming misaligned when I use "sScrollY". The header realigns itself only after I sort a certain column by clicking on one of the headers.

Misaligned.

Corrected only After I click on a sort header.

My Setting:

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" }
        ]
});

I've also tried fnAdjustColumnSizing() which every Google Search seems to be suggesting but it doesn't do anything for me.

回答1:

I have fix this way;

wrap the table with div and

CSS

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

Remove

• “sScrollY”
• "sScrollX"

回答2:

I've had to delay when data is loaded because when page loads it does not see the scroll bar and table headers get misaligned. But if I delay it, it sees the scroll bar and the table header matches up perfect.

<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" }
    ]
   });
}

回答3:

I had to remove the scrolling manually, because nothing else worked. Then I used @Suresh Kamrushi 's answer to make an external scrolling div

Here's the code if anyone needs it :)

//replace all scroll-related divs with their content (aka unwrap the content)
$('.table-responsive').replaceWith($('.table-responsive').html());
$('.dataTables_scroll').replaceWith($('.dataTables_scroll').html());         
$('.dataTables_scrollHead').replaceWith($('.dataTables_scrollHead').html()); 
$('.dataTables_scrollBody').replaceWith($('.dataTables_scrollBody').html());
$('.dataTables_scrollHeadInner').replaceWith($('.dataTables_scrollBody').html());
$('.dataTables_sizing').each(function (index, value) {
$(this).replaceWith($(this).html());
});
//Re-size the header
$('#table_view_subs thead tr').attr("style","height:37.6px");
//add external scroll div
$("#table_view_subs").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");

It's very hacky, but if you've lost a week and your patience trying to get the DataTable to behave, you're not gonna care

回答4:

Well, whenever you sort or filter and the contents of the table change in some way, fnDraw gets called. If an extra fnDraw is working (via clicking your sorting header after the table has loaded), and it isn't tied to bServerSide then trying an extra call to oTable.fnDraw() couldn't hurt.

回答5:

Using ScrollX or scrollY create such problems. there is a work around for it:

$('#userslist').DataTable({            
  "initComplete": function (settings, json) {  
    $("#reportDetails").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

First remove ScrollX or scrollY if you have in your page and add above code to fix it.

回答6:

Try this:

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