Datatables表头&；使用“时，列数据未对齐”；sScrollY“；

当我使用“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" }
        ]
});

oTable=$（'#userslist'）。数据表({
“bJQueryUI”：没错，
“bRetrieve”：没错，
“sScrollY”：“150px”，
“bAutoWidth”：没错，
“bPaginate”：错误，
“sScrollX”：“100%”，
“sScrollXInner”：“100%”，
“sPaginationType”：“完整编号”，
“bAutoWidth”：假，
“sDom”：“t”，
“aaData”：datan，
“aoColumns”：[
{“mDataProp”：“uid”}，
{“mDataProp”：“fn”}，
{“mDataProp”：“un”}，
{“mDataProp”：“pw”}，
{“mDataProp”：“em”}，
{“mDataProp”：“ac”}
]
});

---

我还尝试了fnastjustColumnsize（），每个谷歌搜索似乎都在建议这一点，但它对我没有任何帮助。

好吧，每当你排序或筛选并且表的内容以某种方式改变时，就会调用fnDraw。如果一个额外的fnDraw正在工作（通过在加载表后单击排序标题），并且它没有绑定到bServerSide，那么尝试额外调用oTable.fnDraw（）不会有什么坏处。

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

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

加载表
函数延迟加载（f）{
设置超时（f，50）
}
函数loadusers（）{
oTable=$（'#userslist'）。数据表({
“bJQueryUI”：没错，
“bRetrieve”：没错，
“sScrollY”：“150px”，
“bAutoWidth”：没错，
“bPaginate”：错误，
“sScrollX”：“100%”，
“sScrollXInner”：“100%”，
“sPaginationType”：“完整编号”，
“bAutoWidth”：假，
“sDom”：“t”，
“aaData”：datan，
“aoColumns”：[
{“mDataProp”：“uid”}，
{“mDataProp”：“fn”}，
{“mDataProp”：“un”}，
{“mDataProp”：“pw”}，
{“mDataProp”：“em”}，
{“mDataProp”：“ac”}
]
});
}

我已经用这种方法修复了

用div和

CSS

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

删除

• “斯克罗利”
• “sScrollX”

---

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

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

$（'#userslist'）。数据表（{
“initComplete”：函数（设置，json）{
$（“#报告详细信息”）.wrap（“”）；
},
});

首先删除ScrollX或scrollY（如果页面中有），然后添加上述代码以修复它。

尝试以下操作：

---

$（$.fn.dataTable.tables（true））.dataTable（）.columns.adjust（）

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

如果有人需要，下面是代码：）

//将所有与滚动相关的div替换为其内容（也称为展开内容）
$（'.table responsive'）.replacetwith（$（'.table responsive'）.html（））；
$（'.dataTables_-scroll'）。替换为（$（'.dataTables_-scroll'）.html（））；
$（'.dataTables\u scrollHead'）。替换为（$（'.dataTables\u scrollHead'）.html（））；
$（'.dataTables\u scrollBody'）。替换为（$（'.dataTables\u scrollBody'）.html（））；
$（'.dataTables\u scrollHeadInner'）。替换为（$（'.dataTables\u scrollBody'）.html（））；
$（'.dataTables_size'）。每个（函数（索引、值）{
$（this.replace为（$（this.html（））；
});
//重新调整标题的大小
$（'table#view_subs thead tr'）.attr（“样式”，“高度：37.6px”）；
//添加外部滚动div
$（“#表#视图#subs”）.wrap（“”）；

---

这很麻烦，但是如果你已经失去了一周的耐心，试图让DataTable正常工作，你不会在意的。

我也有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%;
}

---

干得好。恭喜。

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