数据表表头&当使用“ sScrollY”时，列数据未对齐。 [英] Datatables table header & column data misaligned when using "sScrollY"

问题描述

当我使用 sScrollY时，表格标题出现未对齐的问题。只有在我通过单击标题之一对特定列进行排序之后，标题才会重新对齐。

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.

我的设置：

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

我也尝试过 fnAdjustColumnSizing（），每个Google搜索似乎

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

推荐答案

我不得不延迟加载数据的时间，因为页面何时加载时看不到滚动条和表格标题未对齐。但是，如果我延迟了，它会看到滚动条和表格标题完全匹配。

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

这篇关于数据表表头&当使用“ sScrollY”时，列数据未对齐。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！