Answers

• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022 Answer ✓

  I was able to recreate the issue in this test case:
  http://live.datatables.net/cutogohe/1/edit

  Click the Open all button then scroll and you will see the problem. Looks like the fixedHeader.adjust() will help. Uncomment the line //table.fixedHeader.adjust(); then click Run with JS button. Do the same test and you will see the FixedHeader works. This is from the docs:

  For performance reasons the position values are cached rather than being constantly updated.

  Use the fixedHeader.adjust() in the function where you show and hide the rows. I have this in the click event.

  Kevin
• pain19 Posts: 57Questions: 5Answers: 0

  January 2022

  @kthorngren you're the man!!! I knew I had to be missing something and this was it! I did what you said and achieved the desired results! I think you just made my app infinitely better my friend, so THANK YOU for the assist!
• pain19 Posts: 57Questions: 5Answers: 0

  January 2022

  @kthorngren quick follow up help. I noticed the following:

  1) Open all detail rows.
  2) Scroll down a bit so the header is fixed.
  3) Sort any column.

  When this happens, I get the same result as before where the header will eventually scroll off.

  I thought if I monitored the sort/order event (order.dt) and when fired, use the adjust() method, but that doesn't seem to fix the issue like it did before. I know the event is being fired and captured correctly because I output to the console when it is triggered. I am using something like the following in my code.

  `table.on('oder.dt', function() {
  console.log("User has performed a sort.

  // I've tried both
  table.fixedHeader.adjust(); // Does prevent the bad result
  $('#example).fixedHeader.adjust(); // Currently collapses all detail rows
  });`

  Anyway, let me know your thoughts and I'll continue to use your current code to work with.
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022

  Thought maybe it would work in the draw event:
  http://live.datatables.net/cutogohe/4/edit

  But it doesn't. Not sure why. Maybe @allan or @colin can help.

  $('#example).fixedHeader.adjust(); // Currently collapses all detail rows

  You need an instance of the API. $('#example) is just returning a jQuery object. You could use $('#example).DataTable().fixedHeader.adjust();.

  Kevin
• pain19 Posts: 57Questions: 5Answers: 0

  January 2022 edited January 2022

  @kthorngren: from my testing, it looks like I may have figured it out--your last example was on track. I took that code and put it inside of the event that was tracking the order event. Below is the final piece of code (in case you're curious or someone else stumbles on this post):

    table.on('order.dt', function() {
      table.on('draw', function () {
        table.fixedHeader.adjust();
      });    
    });
  

  Thanks again for all your help and super-fast responses!
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022

  That looks a bit dangerous

  I think this will result in a new draw event being created each time the table is ordered. But that does suggest there might be a timing issue. I added a setTimeout with a 0 delay in the draw and it seems to work:
  http://live.datatables.net/cutogohe/8/edit

  Kevin
• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2022 Answer ✓

  Kevin is right, that will create more and more event handlers on each order event. A workaround though is to just call that event once with one(), rather than on():

    table.on('order.dt', function() {
      table.one('draw', function () {
        table.fixedHeader.adjust();
      });    
    });
  

  Colin
• pain19 Posts: 57Questions: 5Answers: 0

  January 2022 edited January 2022

  @kthorngren and @Colin: Thanks for the assistance! It works like a charm and will not produce an endless event handlers!

  On to the next issue for me.

  My app uses tabs and each tab has its own DT. All tables are loaded with their data when the page is loaded. I started turning on the fixedHeader on a new tab but when it scrolls it initially displays the correct header, but if I scroll enough it gets replaced by the header of the existing tab that is working. I'm sure I need to do a check to make sure the proper fixedHeader is displayed. But I'm not one to be spoon fed so I'll spend some time on it. And open a new thread if necessary.

  Thanks again and your guys really do ROCK!!!
• kthorngren Posts: 21,364Questions: 26Answers: 4,956

  January 2022

  I've seen issues like this on the forum but don't remember the exact cause. Make sure you are using the correct FixedHeader JS and CSS files for the styling framework you are using. Use the Download builder. Take a look on the forum to see if you can find other threads with the same issue.

  Update the test case to show the issue if you don't find the resolution.

  Kevin