数据表标题错位

Question

下图显示了点击文本框（搜索/过滤..）之前数据表未对齐的标题。一旦后者成为焦点，标题再次对齐。我注意到当 scrollY 关闭标题时很好，我需要它。任何想法如何解决它。 在下面的sn-ps中，只要改变分页选项，就可以再次看到header的重新对齐。

$('#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();
})

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/>
<input id="btn" type="button" value="Click ME!" />


<div style="display:none">
  <div id="mdl" class="panel-body">
    <input id="RegSrcsrcctl" type="text" />
    <input id="bt1" type="button" value="dummy search" />
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none" style="width:100%">
      <thead>
        <tr>
          <th></th>
          <th><b>File Number</b></th>
          <th><b>Patient Name</b></th>
          <th><b>DOB</b></th>
          <th><b>Age</b></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

Answer 1

我注意到表格宽度未对齐的原因是宽度最初被明确设置为100px，而不是正确计算的宽度。这可能无法解决手头的问题，但一种解决方法是将table 和包装器div 元素强制为width:100%。这样做确实适用于我测试过的场景，但请注意它可能会导致某些响应行为出现问题。调整是添加如下css：

.dataTables_scrollHeadInner{
  width:100% !important;
}
.dataTables_scrollHeadInner table{
  width:100% !important;
}

更新：

好的，我查看了一些类似的问题，这与您的表格以模式显示这一事实有关。模态完整视图仅在设置数据表后才呈现，因此在您强制执行重新绘制它之前，列大小可能会出现问题，例如更改窗口大小或选择数据表选项之一。解决的办法是在modal的open事件上调用columns().adjust()，这样在modal显示出来后表格重绘。因此，我查看了您正在使用的 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();
    }
  });
})

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/>
<input id="btn" type="button" value="Click ME!" />


<div style="display:none">
  <div id="mdl" class="panel-body">
    <input id="RegSrcsrcctl" type="text" />
    <input id="bt1" type="button" value="dummy search" />
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none">
      <thead>
        <tr>
          <th></th>
          <th><b>File Number</b></th>
          <th><b>Patient Name</b></th>
          <th><b>DOB</b></th>
          <th><b>Age</b></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

Answer 2

我已经尝试了所有解决方案。我只是想出了一种以自己的方式解决这个问题的方法。 首先，将 100% 宽度添加到数据表标题。

.dataTables_scrollHeadInner{  width:100% !important; }
.dataTables_scrollHeadInner table{  width:100% !important; }

然后在加载并显示所有页面内容后，使用“order”强制数据表重绘。

$(div).show();
$('#datatable').DataTable().order([0, 'asc']).draw();

通过这个解决方案，我解决了表头没有完全跨过表格并且未对齐的问题。希望这可以帮助。

Answer 3

在浪费了很长时间后，我发现以下解决方案在 Chrome 和 Firefox 上运行良好。首先，添加以下 CSS 样式：-

<style>
    .dataTables_scrollHeadInner {
        width:100% !important;
        padding: 0 !important;
    }
</style>

在您的 javascript 中，您可以随时添加行：-

table.rows.add(someJson);
table.draw();

其中'table'是一个指向数据表的全局变量：-

 table = $('#datatab').DataTable({
        ...
 });

在您的 html 中，将 width="100%" 添加到表格中：-

 <table id="datatab" class="..." width="100%">
       ...
 </table>

Answer 4

我也遇到了同样的问题。 使用以下代码后得到修复。

table.columns.adjust();

Answer 5

另一个更新， 我没有在初始化时将宽度强制为 100%，而是在模式的打开事件上执行此操作，产生更一致的结果，我添加了更多事件来管理模式调整大小事件。

感谢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": '<i data-toggle class="fa fa-plus-square-o text-primary h5 m-none" style="cursor: pointer;"></i>'
       },
       { "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(); },
  });
})

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/>
<input id="btn" type="button" value="Click ME!" />


<div style="display:none">
  <div id="mdl" class="panel-body">
    <input id="RegSrcsrcctl" type="text" />
    <input id="bt1" type="button" value="dummy search" />
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none">
      <thead>
        <tr>
          <th></th>
          <th><b>File Number</b></th>
          <th><b>Patient Name</b></th>
          <th><b>DOB</b></th>
          <th><b>Age</b></th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>