数据表标题未对齐 [英] Datatables header misalignment

问题描述

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

The picture below shows the header of the datatable misalignment before you click on the textbox (search/filter..). once the latter becomes in focus, the header aligns again. I noticed that when scrollY is off the header is fine, i need it on. any idea how to fix it. in the following snippets, just change the paging option and you can see the realignment of the header again.

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

推荐答案

我注意到表格宽度错位的原因是宽度是显式设置为 100px ，而不是正确计算的宽度。这可能无法解决手头的问题，但解决方法是强制表和包装 div 元素到宽度：100％。这样做对我测试的场景有效，但是请注意它可能会导致某些响应行为出现问题。调整是添加以下css：

I noticed that the reason for the misaligned table width is due to the width being explicitly set to 100px initally, instead of the correctly calculated width. This may not address the issue at hand, but a workaround is to force the table and wrapper div elements to width:100%. Doing this does work for the scenarios I tested on, but be advised it may cause issues with certain responsive behavior. The adjustment is to add the following css:

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

更新：

好的，我看了一些类似的问题，它与你的表以模态显示的事实有关。模态完整视图仅在设置数据表后呈现，因此在您强制执行重绘操作之前可能存在列大小调整的问题，例如更改窗口大小或选择其中一个数据表选项。解决方案是在模式的打开事件上调用 columns（）。adjust（），因此在显示模态后重绘表。所以我去了一下你正在使用的dockmodal库的文档。在那里我发现你可以在 open 事件中指定一个函数，该事件在模态的选项中定义。将此更改修复此问题，无需更改css。看一下更新的代码：

Ok I took a look at some similar issues, and its related to the fact that your table is displayed in a modal. The modals full view is only rendered after the datatable is set up, so there can be issues with column sizing until you force an action to redraw it, like changing the window size or selecting one of the datatable options. The solution is to call columns().adjust() on the open event of the modal, so the table is redrawn after the modal is displayed. So I went a took a look at the docs for the dockmodal library you are using. There i found that you can specify a function to be called on the open event, defined within the options for the modal. Putting this change in fixes the issue, no need for css changes. Take a look at the updated code:

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>

这篇关于数据表标题未对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！