Question

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

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

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

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

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

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

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

Answer 2

浪费了很长时间后，我发现以下解决方案适用于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 3

我也面临同样的问题。使用以下代码后已修复。

table.columns.adjust();

Answer 4

另一个更新，而不是在初始化时强制宽度为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>

数据表标题未对齐

4 个答案: