Datatables fixedheader感到困惑

Question

我有一个页面有两个数据table table，每个标签一个。我正在使用 fixedHeaders 将 headers 保持在顶部。下面是一个带有模型的代码来演示这个问题。

如果您转到选项卡 2 并滚动，当它切换到 fixedHeader 模式时，您最终会从选项卡 1 中的 table 获得 headers。

在实际站点上，我还注意到，如果您向下滚动足够远，headers 从一个 table 的 headers 切换到另一个。我认为 datatables 正在考虑它们既可见又一个在另一个之下。

解决这个问题的最佳方法是什么？我可以在隐藏 table 时暂时禁用 fixedHeaders 吗？

注意：代码在下面，但固定的 headers 似乎对我不起作用，所以如果它对你不起作用，请检查 jsfiddle link！

$(document).ready(function() {
    $(".dataTable").dataTable({ "pageLength": 50});
  $("#tabs li").on("click", function() {
      $("#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $(".tabbody").hide();
      $("#"+$(this).data("tab")).show();
  });
  });

#tabs {
  border-bottom: 1px solid black;
}
#tabs ul {
  margin: 0;
 
}
#tabs ul li {
  list-style-type: none;
  display: inline-block;
  padding: 5px 10px 3px;
  margin:0;  
  margin-bottom:-1px;
  cursor: pointer;
  border: 1px solid black;
  width: 5em;
  border-radius: 10px 10px 0 0;
 
}
#tabs ul li.active {
  border-bottom: 1px solid white;
} 

#tabs .t1.active {
  border-right: 1px solid grey;
}

#tabs .t2.active {
  border-left: 1px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/w/bs/dt-1.10.23/sp-1.2.2/sl-1.3.3/fc-3.3.2/fh-3.2.0/r-2.2.7/datatables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/w/bs/dt-1.10.23/sp-1.2.2/sl-1.3.3/fc-3.3.2/fh-3.2.0/r-2.2.7/datatables.min.js"></script>
<div id="tabs">
<ul>
<li data-tab="tab1" class="t1 active">Tab1</li><li data-tab="tab2" class="t2">Tab2</li>

</ul>
</div>

<div id="tab1" class="tabbody">
 
  <table class="dataTable">
  <thead><tr><th>T1 Col1</th><th>T1 Col2</th><th>T1 Col3</th></tr></thead>
  <tbody>
<tr><td>Cell 1-A</td><td>Cell 1-B</td><td>Cell 1-C</td></tr>
<tr><td>Cell 2-A</td><td>Cell 2-B</td><td>Cell 2-C</td></tr>
<tr><td>Cell 3-A</td><td>Cell 3-B</td><td>Cell 3-C</td></tr>
<tr><td>Cell 4-A</td><td>Cell 4-B</td><td>Cell 4-C</td></tr>
<tr><td>Cell 5-A</td><td>Cell 5-B</td><td>Cell 5-C</td></tr>
<tr><td>Cell 6-A</td><td>Cell 6-B</td><td>Cell 6-C</td></tr>
<tr><td>Cell 7-A</td><td>Cell 7-B</td><td>Cell 7-C</td></tr>
<tr><td>Cell 8-A</td><td>Cell 8-B</td><td>Cell 8-C</td></tr>
<tr><td>Cell 9-A</td><td>Cell 9-B</td><td>Cell 9-C</td></tr>
<tr><td>Cell 10-A</td><td>Cell 10-B</td><td>Cell 10-C</td></tr>
<tr><td>Cell 11-A</td><td>Cell 11-B</td><td>Cell 11-C</td></tr>
<tr><td>Cell 12-A</td><td>Cell 12-B</td><td>Cell 12-C</td></tr>
<tr><td>Cell 13-A</td><td>Cell 13-B</td><td>Cell 13-C</td></tr>
<tr><td>Cell 14-A</td><td>Cell 14-B</td><td>Cell 14-C</td></tr>
<tr><td>Cell 15-A</td><td>Cell 15-B</td><td>Cell 15-C</td></tr>
<tr><td>Cell 16-A</td><td>Cell 16-B</td><td>Cell 16-C</td></tr>
<tr><td>Cell 17-A</td><td>Cell 17-B</td><td>Cell 17-C</td></tr>
<tr><td>Cell 18-A</td><td>Cell 18-B</td><td>Cell 18-C</td></tr>
<tr><td>Cell 19-A</td><td>Cell 19-B</td><td>Cell 19-C</td></tr>
<tr><td>Cell 20-A</td><td>Cell 20-B</td><td>Cell 20-C</td></tr>
<tr><td>Cell 21-A</td><td>Cell 21-B</td><td>Cell 21-C</td></tr>
<tr><td>Cell 22-A</td><td>Cell 22-B</td><td>Cell 22-C</td></tr>
<tr><td>Cell 23-A</td><td>Cell 23-B</td><td>Cell 23-C</td></tr>
<tr><td>Cell 24-A</td><td>Cell 24-B</td><td>Cell 24-C</td></tr>
<tr><td>Cell 25-A</td><td>Cell 25-B</td><td>Cell 25-C</td></tr>
<tr><td>Cell 26-A</td><td>Cell 26-B</td><td>Cell 26-C</td></tr>
<tr><td>Cell 27-A</td><td>Cell 27-B</td><td>Cell 27-C</td></tr>
<tr><td>Cell 28-A</td><td>Cell 28-B</td><td>Cell 28-C</td></tr>
<tr><td>Cell 29-A</td><td>Cell 29-B</td><td>Cell 29-C</td></tr>
<tr><td>Cell 30-A</td><td>Cell 30-B</td><td>Cell 30-C</td></tr>
<tr><td>Cell 31-A</td><td>Cell 31-B</td><td>Cell 31-C</td></tr>
<tr><td>Cell 32-A</td><td>Cell 32-B</td><td>Cell 32-C</td></tr>
<tr><td>Cell 33-A</td><td>Cell 33-B</td><td>Cell 33-C</td></tr>
<tr><td>Cell 34-A</td><td>Cell 34-B</td><td>Cell 34-C</td></tr>
<tr><td>Cell 35-A</td><td>Cell 35-B</td><td>Cell 35-C</td></tr>
<tr><td>Cell 36-A</td><td>Cell 36-B</td><td>Cell 36-C</td></tr>
<tr><td>Cell 37-A</td><td>Cell 37-B</td><td>Cell 37-C</td></tr>
<tr><td>Cell 38-A</td><td>Cell 38-B</td><td>Cell 38-C</td></tr>
<tr><td>Cell 39-A</td><td>Cell 39-B</td><td>Cell 39-C</td></tr>
<tr><td>Cell 40-A</td><td>Cell 40-B</td><td>Cell 40-C</td></tr>
<tr><td>Cell 41-A</td><td>Cell 41-B</td><td>Cell 41-C</td></tr>
<tr><td>Cell 42-A</td><td>Cell 42-B</td><td>Cell 42-C</td></tr>
<tr><td>Cell 43-A</td><td>Cell 43-B</td><td>Cell 43-C</td></tr>
<tr><td>Cell 44-A</td><td>Cell 44-B</td><td>Cell 44-C</td></tr>
<tr><td>Cell 45-A</td><td>Cell 45-B</td><td>Cell 45-C</td></tr>
<tr><td>Cell 46-A</td><td>Cell 46-B</td><td>Cell 46-C</td></tr>
<tr><td>Cell 47-A</td><td>Cell 47-B</td><td>Cell 47-C</td></tr>
<tr><td>Cell 48-A</td><td>Cell 48-B</td><td>Cell 48-C</td></tr>
<tr><td>Cell 49-A</td><td>Cell 49-B</td><td>Cell 49-C</td></tr>
<tr><td>Cell 50-A</td><td>Cell 50-B</td><td>Cell 50-C</td></tr>
  </tbody>
  </table>
</div>
<div id="tab2" class="tabbody" style="display:none;">
<table class="dataTable">
<thead><tr><th>Table 2, Column A</th><th>Table 2, Column B</th></tr></thead>
<tbody>
  <tr><td>Pos 1-A</td><td>Count: 1</td></tr>
<tr><td>Pos 2-A</td><td>Count: 1</td></tr>
<tr><td>Pos 3-A</td><td>Count: 2</td></tr>
<tr><td>Pos 4-A</td><td>Count: 2</td></tr>
<tr><td>Pos 5-A</td><td>Count: 2</td></tr>
<tr><td>Pos 6-A</td><td>Count: 4</td></tr>
<tr><td>Pos 7-A</td><td>Count: 5</td></tr>
<tr><td>Pos 8-A</td><td>Count: 8</td></tr>
<tr><td>Pos 9-A</td><td>Count: 3</td></tr>
<tr><td>Pos 10-A</td><td>Count: 7</td></tr>
<tr><td>Pos 11-A</td><td>Count: 10</td></tr>
<tr><td>Pos 12-A</td><td>Count: 10</td></tr>
<tr><td>Pos 13-A</td><td>Count: 10</td></tr>
<tr><td>Pos 14-A</td><td>Count: 12</td></tr>
<tr><td>Pos 15-A</td><td>Count: 1</td></tr>
<tr><td>Pos 16-A</td><td>Count: 13</td></tr>
<tr><td>Pos 17-A</td><td>Count: 2</td></tr>
<tr><td>Pos 18-A</td><td>Count: 8</td></tr>
<tr><td>Pos 19-A</td><td>Count: 2</td></tr>
<tr><td>Pos 20-A</td><td>Count: 14</td></tr>
<tr><td>Pos 21-A</td><td>Count: 3</td></tr>
<tr><td>Pos 22-A</td><td>Count: 1</td></tr>
<tr><td>Pos 23-A</td><td>Count: 17</td></tr>
<tr><td>Pos 24-A</td><td>Count: 11</td></tr>
<tr><td>Pos 25-A</td><td>Count: 24</td></tr>
<tr><td>Pos 26-A</td><td>Count: 11</td></tr>
<tr><td>Pos 27-A</td><td>Count: 23</td></tr>
<tr><td>Pos 28-A</td><td>Count: 22</td></tr>
<tr><td>Pos 29-A</td><td>Count: 12</td></tr>
<tr><td>Pos 30-A</td><td>Count: 16</td></tr>
<tr><td>Pos 31-A</td><td>Count: 27</td></tr>
<tr><td>Pos 32-A</td><td>Count: 24</td></tr>
<tr><td>Pos 33-A</td><td>Count: 18</td></tr>
<tr><td>Pos 34-A</td><td>Count: 30</td></tr>
<tr><td>Pos 35-A</td><td>Count: 12</td></tr>
<tr><td>Pos 36-A</td><td>Count: 19</td></tr>
<tr><td>Pos 37-A</td><td>Count: 6</td></tr>
<tr><td>Pos 38-A</td><td>Count: 22</td></tr>
<tr><td>Pos 39-A</td><td>Count: 4</td></tr>
<tr><td>Pos 40-A</td><td>Count: 38</td></tr>
<tr><td>Pos 41-A</td><td>Count: 12</td></tr>
<tr><td>Pos 42-A</td><td>Count: 21</td></tr>
<tr><td>Pos 43-A</td><td>Count: 29</td></tr>
<tr><td>Pos 44-A</td><td>Count: 13</td></tr>
<tr><td>Pos 45-A</td><td>Count: 39</td></tr>
<tr><td>Pos 46-A</td><td>Count: 1</td></tr>
<tr><td>Pos 47-A</td><td>Count: 19</td></tr>
<tr><td>Pos 48-A</td><td>Count: 30</td></tr>
<tr><td>Pos 49-A</td><td>Count: 5</td></tr>
<tr><td>Pos 50-A</td><td>Count: 31</td></tr>
</tbody>
</table>

</div>

Answer 1

每次显示或隐藏 table 时，您都需要使用 fixedHeader.adjust() api 方法。这样 DataTables 可以在隐藏 table 时禁用 headers，并在再次显示时正确重新对齐 headers。

看看这个 jsFiddle：https://jsfiddle.net/cheesyMan/jwvo4hkr/3/

Datatables fixedheader感到困惑

Datatables fixedheader gets confused

datatables