fixedHeader "overlap" fixes itself if I resize the browser

tomclark

I have a page that displays search results as links. When you click the link, an ajax call executes that goes and gets that particular table of data. I set it up very simply:

$("#SearchResultDetail").html(results);
$('#CaseDatatable').DataTable({
"paging": false,
"info": false,
"searching": false,
"ordering": false,
"fixedHeader": {
"headerOffset": 40
}

So each time you click a link for a result, the div that contains the table is cleared, the ajax call executes, and the table is displayed and the above code executes. For some reason, one of the tables when displayed, shows a small portion of the fixed header when you've scrolled and it "sticks" (don't know what else to call it). When you scroll back to the top, the little overlap disappears. Here's the weird part: If you resize the browser window even the tiniest bit, the overlap is gone. This happens in Chrome, Firefox, and MS Edge. I'm new to DataTables but it really solves my problem for the client. This is just a weird little problem and it doesn't happen with every search either. Makes me think it's data related but I don't know how.

tomclark

I think I know the key symptom for it. If I display a table that has a taller header, the next time I display a different table with a smaller header, the header from the previous table is still there, like it is cached or something. That's the weird behavior I'm seeing.

tomclark

Well, it looks like I put the question up too soon because I figured out a way to solve the problem. I'll put it here in case it's of interest to anyone else.

My ajax call is recreating the table with each search result and the table ID is the same for each time you click on a search result link. Since it's obvious that the DataTable is cached, the solution is to call destroy (if the DataTable exists) before recreating the table. I thought clearing the div would do that, but I wasn't taking into account caching. That's all it was. Sorry for taking up space in the forum.