Фиксированный заголовок Datatables путается

У меня есть страница с двумя таблицами данных, по одной на каждой вкладке. Я использую fixedHeaders, чтобы заголовки оставались вверху. Ниже приведен код с макетом для демонстрации проблемы.

Если вы перейдете на вкладку 2 и прокрутите, вы получите заголовки из таблицы на вкладке 1, когда она переключится в режим fixedHeader.

На реальном сайте я также заметил, что если прокрутить страницу вниз достаточно далеко, заголовки переключаются с заголовков одной таблицы на другую. Я думаю, что datatables считает их как видимыми, так и один под другим.

Каков наилучший способ обойти это? Могу ли я временно отключить fixedHeaders, пока таблица скрыта?

https://jsfiddle.net/zrkwy3qh/1/

ПРИМЕЧАНИЕ. Код приведен ниже, но фиксированные заголовки, похоже, не работают для меня в SO, поэтому проверьте ссылку jsfiddle, если она не работает для вас!

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

datatables

09.05.2022 22:04

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно использовать метод API fixedHeader.adjust() каждый раз, когда таблица отображается или скрывается. Таким образом, DataTables может отключать заголовки, когда таблица скрыта, и правильно выравнивать заголовки, когда она снова отображается.

Посмотрите на этот jsFiddle: https://jsfiddle.net/cheesyMan/jwvo4hkr/3/

10.05.2022 00:12

Другие вопросы по теме

Реагировать добавить дочернюю таблицу в таблицу данных

Это правильный способ, которым я могу разобрать внутри оператора if else для Datatable

Jquery datatable версии 1.10 влияет на раскрывающийся компонент Bootstrap версии 5.1

Datatables.net и sweetalert

Кнопка расширения jQuery Datatable для работы с несколькими таблицами на одной странице

Удалить выбранный класс после получения данных Ajax и draw() DataTable

DataTables: Инициализируйте две DataTables на одной странице по-разному

Где разместить логику Datatables JS в laravel, используя смесь laravel?

Почему DataTable отображает только первую строку массива

Как установить сортировку выбранного столбца в таблицах данных?

Фиксированный заголовок Datatables путается

Ответы 1

Другие вопросы по теме

Похожие вопросы