使用“sScrollY”时数据表表头和列数据未对齐答案

【问题标题】：Datatables table header & column data misaligned when using "sScrollY"使用“sScrollY”时数据表表头和列数据未对齐
【发布时间】：2014-02-17 02:51:18
【问题描述】：

当我使用“sScrollY”时，我的表头出现错位问题。只有在我通过单击其中一个标题对特定列进行排序后，标题才会重新对齐。

未对齐。

仅在单击排序标题后才更正。

我的设置：

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 搜索似乎都在建议，但它对我没有任何作用。

【问题讨论】：

标签： datatables

【解决方案1】：

我已经解决了这个问题；

用 div 和

包裹表格

CSS

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

删除

“sScrollY”
“sScrollX”

【讨论】：

【解决方案2】：

我不得不延迟加载数据，因为当页面加载时它看不到滚动条并且表格标题未对齐。但如果我延迟它，它会看到滚动条和表格标题完美匹配。

<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】：

我不得不手动移除滚动，因为其他方法都不起作用。然后我使用@Suresh Kamrushi 的答案制作了一个外部滚动div

如果有人需要，这里是代码:)

//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>");

这很 hacky，但如果你已经失去了一周的时间，并且耐心地试图让 DataTable 正常运行，那么你就不会在意

【讨论】：

干得好。恭喜。

【解决方案4】：

好吧，每当您进行排序或过滤并且表格的内容以某种方式发生变化时，都会调用 fnDraw。如果一个额外的 fnDraw 正在工作（通过在表格加载后单击排序标题），并且它没有绑定到 bServerSide，那么尝试额外调用 oTable.fnDraw() 不会有任何伤害。

【讨论】：

【解决方案5】：

使用 ScrollX 或 scrollY 会产生此类问题。有一个解决方法：

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

如果您的页面中有 ScrollX 或 scrollY，请先删除并添加上面的代码来修复它。

【讨论】：

【解决方案6】：

试试这个：

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

【讨论】：

【解决方案7】：

我也遇到了 ScrollX 的问题。对于宽桌子，这是一个很大的帮助。对于窄表，如上面的问题案例，我也遇到了同样的问题。出现问题是因为一张桌子上也制作了 3 张桌子。一个用于页眉，一个用于数据，一个用于页脚。数据部分具有正确的宽度。页眉和页脚太短，所以我使用 CSS 将它们放大：

   // Scroll-X
DIV.dataTables_scrollHeadInner,
DIV.dataTables_scrollFootInner{
    min-width: 100%;
}
DIV.dataTables_scrollHeadInner > TABLE,
DIV.dataTables_scrollFootInner > TABLE{
    min-width: 100%;
}

【讨论】：