数据表标题未对齐
下图显示了在单击文本框（搜索/filter…）之前数据表未对齐的标题。 一旦后者成为焦点，标题再次对齐。 我注意到当scrollY关闭时，标题很好，我需要它。 任何想法如何解决它。 在以下代码段中，只需更改分页选项，您就可以再次看到标题的重新对齐。
$('#RegSrc').DataTable({ dom:"<'row'><'row'>" + "<'row'>", select: true, scrollY: 200, deferRender: true, //scrollY: 500, responsive: false, fixedHeader: { header: true, footer: true }, "processing": true, "serverSide": false, bAutoWidth: true, data: [], rowCallback: function (row, data) { }, }); $("#btn").click(function() { $("#mdl").dockmodal(); }) File Number Patient Name DOB Age
我注意到表格宽度错位的原因是由于宽度明确地设置为100px ，而不是正确计算的宽度。 这可能无法解决手头的问题，但解决方法是强制table和包装器div元素的width:100% 。 这样做对我测试过的场景有效，但请注意它可能会导致某些响应行为出现问题。 调整是添加以下css：
.dataTables_scrollHeadInner{ width:100% !important; } .dataTables_scrollHeadInner table{ width:100% !important; }
更新：
好的，我看了一些类似的问题，它与你的表以模态显示的事实有关。 仅在设置数据表之后才会呈现模态完整视图，因此在强制执行重绘操作之前可能会出现列大小调整问题，例如更改窗口大小或选择其中一个数据表选项。 解决方案是在模态的open事件上调用columns().adjust() ，因此在显示模态后重绘表。 所以我去了一下你正在使用的dockmodal库的文档。 在那里我发现你可以指定一个在open事件上调用的函数，在函数的选项中定义。 将此更改修复此问题，无需更改css。 看一下更新的代码：
var table = $('#RegSrc').DataTable({ dom:"<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" + "<'row'<'col-sm-12'tr>>", select: true, scrollY: 200, deferRender: true, //scrollY: 500, responsive: false, fixedHeader: { header: true, footer: true }, "processing": true, "serverSide": false, bAutoWidth: true, data: [], rowCallback: function (row, data) { }, }); $("#btn").click(function() { $("#mdl").dockmodal({ open : function() { table.columns.adjust(); } }); })
浪费了很长时间后，我发现以下解决方案适用于Chrome和Firefox。 首先，添加以下CSS样式： –
在您的javascript中，您可以随时添加行： –
table.rows.add(someJson); table.draw();
其中’table’是指向数据表的全局变量： –
table = $('#datatab').DataTable({ ... });
在你的html中，将width =“100％”添加到表中： –
...
另一个更新，而不是在初始化时强制宽度为100％，我在模态的打开事件上执行，产生更一致的结果，我添加了更多事件来管理模态resize事件。
感谢Sasang
var table = $('#RegSrc').DataTable({ dom:"<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" + "<'row'<'col-sm-12'tr>>", select: true, scrollY: 200, deferRender: true, //scrollY: 500, responsive: false, fixedHeader: { header: true, footer: true }, "processing": true, "serverSide": false, bAutoWidth: true, data: [{"Filenum":15090248,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170418115,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170418116,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170227111,"FullName":"asd dsf as a","DOB":"27 Feb 2017","Age":0},{"Filenum":15112775,"FullName":"marwam saleh moh saleem","DOB":"26 Nov 2015","Age":2},{"Filenum":15112777,"FullName":"marwam saleh moh saleem","DOB":"26 Nov 2015","Age":2},{"Filenum":15120996,"FullName":"marwam mohmmad saleem","DOB":null,"Age":null},{"Filenum":160215104,"FullName":"marwam mohmmad abdul fattah Abu Maizer","DOB":"12 Mar 2016","Age":1},{"Filenum":15112270,"FullName":"mohammad j saleh raqaad","DOB":"22 Nov 2015","Age":2},{"Filenum":15112772,"FullName":"salem mohmmad john sarjes","DOB":"22 Oct 2011","Age":6}], "columns": [ { "className": 'details-control', "width": "", "orderable": false, "data": null, "defaultContent": '' }, { "width": "20%", data: "Filenum" }, { "width": "30%", data: "FullName" }, { "width": "20%", data: "DOB" }, { "width": "20%", data: "Age" } ], order: [[1, 'asc']] }); $("#btn").click(function() { $("#mdl").dockmodal({ open : function() { table.columns.adjust(); $('#RegSrc').attr("style","width:100%") }, popout: function () { table.columns.adjust(); }, restore: function () { table.columns.adjust(); }, }); })