fixedHeader being carried over to other pages

datanerd

Hello, I have fixedHeaders for two tables on my site. Each table is located on a different page. When I navigate from page1 to page2, the header from the first table is displayed on the second table.

This is a problem as the tables display different types of data.

as an example
table1:
name, age, username

table2:
weekTotal, Total

but instead I'm seeing [name, age, username] as the header for table2 (the rest of the data is normal). Sometimes I also see both headers.

here is my code:

$('#myTable').DataTable({
    fixedHeader: {
         headerOffset: 75
    }
)

tangerine

You seem to be saying that you have two tables with the same id. You can't do that.

allan

Yes, id's must be unique on an HTML page.

If that isn't the issue, can you link to a test page showing the issue please?

Allan

datanerd

Hello thank you for replying. I'll try to explain a bit better. Unfortunately I couldn't get the fixed header to work at all on Plunker. But I can try to give you a better idea of what the code looks like.

on page 1:

$('#table1').DataTable({
    fixedHeader: {
         headerOffset: 75
    }
)

page 2:

$('#table2').DataTable({
    fixedHeader: {
         headerOffset: 75
    }
)

datanerd

Hello again,
I've solved the issue by disabling the fixedHeader for table1 when the user navigates away from page1. the same was done for table2 on page2.

So when the user clicks a link that will take them to another part of my site, I disable the fixedHeader.

something like this:

page1

$('a').each(function() {
    $(this).on('click', function() {
        table1.fixedHeader.disable();
    });
});

page2

$('a').each(function() {
    $(this).on('click', function() {
        table2.fixedHeader.disable();
    });
});

Thank you for your replies.