我遇到了这个插件反复出现的问题。
启用scrollX选项时,标题列未对齐。我尝试了在 stackoverflow 上阅读的许多解决方案,但没有成功。
也许是插件版本的问题?
但是,这是我的数据表设置:
var oTable = $('#table').dataTable({
"bJQueryUI": true,
"aaData": jsonList,
"bPaginate": true,
"scrollX": true,
"scrollCollapse" : true,
"bLengthChange" : true,
"bAutoWidth" : true,
"oLanguage" : IT,
"aoColumns": [
{ "mDataProp": "name", "sClass": "alignCenter" },
{ "mDataProp": "surname", "sClass": "alignCenter" },
{ "mDataProp": "age", "sClass": "alignCenter" },
{ "mDataProp": "city", "sClass": "alignCenter" },
{ "mDataProp": "state", "sClass": "alignCenter" },
{ "mDataProp": "work", "sClass": "alignCenter" },
],
"aaSorting": [[1, 'asc']],
"fnDrawCallback": function () {
formatTable();
}
我的桌子风格:
class="display" cellspacing="0" width="100%"
库版本:
jquery-1.11.1.min.js - 数据表 1.10.3
当使用scrollX或scrollY参数在DataTables中启用滚动时,它会将整个表格拆分为两个或三个单独的HTML表格元素;页眉、正文以及页脚(可选)。这样做是为了提供以跨浏览器方式滚动数据表的不同部分的能力。
下面的代码在 DataTable 周围包裹了一个 div,样式为“overflow as auto”。当dataTable执行完毕后,我们需要添加div。 我们可以这样做:
$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});
如果您使用scrollX、scrollY、scrollXInner 或sScrollXInner 选项 - 删除它们。它们可能会引起问题。
使标题表的宽度与正文表的宽度相匹配。例如,如果正文的宽度为 100%,则可以对标题使用 css:
.dataTables_scrollHeadInner{
width: 100% !important;
}
.dataTables_scrollHeadInner table{
width: 100% !important;
}
尝试该选项
autoWidth: false
这可能取决于您的html,但也许删除“scrollX”:true,可能会对您有所帮助。