Question

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

enter image description here 错位的。

enter image description here 仅在我点击排序标题后更正。

我的设置：

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

Answer 1

我已经这样修复了;

用div和

包装表

<强> CSS

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

删除

“sScrollY”
“sScrollX”

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

Answer 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正常运行，您就不会在意

Answer 4

好吧，无论何时排序或过滤并且表的内容都以某种方式发生变化，fnDraw都会被调用。如果额外的fnDraw正在工作（通过在表加载后点击你的排序标题），并且它没有绑定到bServerSide，那么尝试额外调用oTable.fnDraw（）就不会受到伤害。

Answer 5

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

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

如果页面中有ScrollX或scrollY，请首先将其删除，然后添加上述代码对其进行修复。

Answer 6

尝试一下：

$（$。fn.dataTable.tables（true））。DataTable（）。columns.adjust（）;

Answer 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%;
}

数据表表格标题＆amp;使用＆＃34; sScrollY＆＃34;时，列数据未对齐

7 个答案: