Datatables fixedheader gets confused

Question

I have a page with two datatables tables, one in each tab. I am using fixedHeaders to keep the headers at the top. Below is a code with a mock up to demonstrate the issue.

If you go to tab 2 and scroll, you end up getting the headers from the table in tab 1 when it switches to fixedHeader mode.

On the real site, I also notice that if you scroll down far enough, the headers switch from one table's headers to the other. I think that datatables is considering them both visible and one below the other.

What is the best way to get around this? Can I disable fixedHeaders temporarily while a table is hidden?

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

NOTE: Code is below, but fixed headers doesn't seem to work for me in SO, so check the jsfiddle link if it doesn't work for you!

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






Tab1
Tab2





 
  
  T1 Col1 T1 Col2 T1 Col3
  
Cell 1-A Cell 1-B Cell 1-C
Cell 2-A Cell 2-B Cell 2-C
Cell 3-A Cell 3-B Cell 3-C
Cell 4-A Cell 4-B Cell 4-C
Cell 5-A Cell 5-B Cell 5-C
Cell 6-A Cell 6-B Cell 6-C
Cell 7-A Cell 7-B Cell 7-C
Cell 8-A Cell 8-B Cell 8-C
Cell 9-A Cell 9-B Cell 9-C
Cell 10-A Cell 10-B Cell 10-C
Cell 11-A Cell 11-B Cell 11-C
Cell 12-A Cell 12-B Cell 12-C
Cell 13-A Cell 13-B Cell 13-C
Cell 14-A Cell 14-B Cell 14-C
Cell 15-A Cell 15-B Cell 15-C
Cell 16-A Cell 16-B Cell 16-C
Cell 17-A Cell 17-B Cell 17-C
Cell 18-A Cell 18-B Cell 18-C
Cell 19-A Cell 19-B Cell 19-C
Cell 20-A Cell 20-B Cell 20-C
Cell 21-A Cell 21-B Cell 21-C
Cell 22-A Cell 22-B Cell 22-C
Cell 23-A Cell 23-B Cell 23-C
Cell 24-A Cell 24-B Cell 24-C
Cell 25-A Cell 25-B Cell 25-C
Cell 26-A Cell 26-B Cell 26-C
Cell 27-A Cell 27-B Cell 27-C
Cell 28-A Cell 28-B Cell 28-C
Cell 29-A Cell 29-B Cell 29-C
Cell 30-A Cell 30-B Cell 30-C
Cell 31-A Cell 31-B Cell 31-C
Cell 32-A Cell 32-B Cell 32-C
Cell 33-A Cell 33-B Cell 33-C
Cell 34-A Cell 34-B Cell 34-C
Cell 35-A Cell 35-B Cell 35-C
Cell 36-A Cell 36-B Cell 36-C
Cell 37-A Cell 37-B Cell 37-C
Cell 38-A Cell 38-B Cell 38-C
Cell 39-A Cell 39-B Cell 39-C
Cell 40-A Cell 40-B Cell 40-C
Cell 41-A Cell 41-B Cell 41-C
Cell 42-A Cell 42-B Cell 42-C
Cell 43-A Cell 43-B Cell 43-C
Cell 44-A Cell 44-B Cell 44-C
Cell 45-A Cell 45-B Cell 45-C
Cell 46-A Cell 46-B Cell 46-C
Cell 47-A Cell 47-B Cell 47-C
Cell 48-A Cell 48-B Cell 48-C
Cell 49-A Cell 49-B Cell 49-C
Cell 50-A Cell 50-B Cell 50-C
  
  



Table 2, Column A Table 2, Column B

  Pos 1-A Count: 1
Pos 2-A Count: 1
Pos 3-A Count: 2
Pos 4-A Count: 2
Pos 5-A Count: 2
Pos 6-A Count: 4
Pos 7-A Count: 5
Pos 8-A Count: 8
Pos 9-A Count: 3
Pos 10-A Count: 7
Pos 11-A Count: 10
Pos 12-A Count: 10
Pos 13-A Count: 10
Pos 14-A Count: 12
Pos 15-A Count: 1
Pos 16-A Count: 13
Pos 17-A Count: 2
Pos 18-A Count: 8
Pos 19-A Count: 2
Pos 20-A Count: 14
Pos 21-A Count: 3
Pos 22-A Count: 1
Pos 23-A Count: 17
Pos 24-A Count: 11
Pos 25-A Count: 24
Pos 26-A Count: 11
Pos 27-A Count: 23
Pos 28-A Count: 22
Pos 29-A Count: 12
Pos 30-A Count: 16
Pos 31-A Count: 27
Pos 32-A Count: 24
Pos 33-A Count: 18
Pos 34-A Count: 30
Pos 35-A Count: 12
Pos 36-A Count: 19
Pos 37-A Count: 6
Pos 38-A Count: 22
Pos 39-A Count: 4
Pos 40-A Count: 38
Pos 41-A Count: 12
Pos 42-A Count: 21
Pos 43-A Count: 29
Pos 44-A Count: 13
Pos 45-A Count: 39
Pos 46-A Count: 1
Pos 47-A Count: 19
Pos 48-A Count: 30
Pos 49-A Count: 5
Pos 50-A Count: 31

cheesyMan · Accepted Answer

You need to use the fixedHeader.adjust() api method each time a table is shown or hidden. This way DataTables can disable headers when a table is hidden and realign correctly the headers when it is shown again.

Look at this jsFiddle: https://jsfiddle.net/cheesyMan/jwvo4hkr/3/

Datatables fixedheader gets confused

Answers (1)

Related Questions