Fixed table header pops up when there is no data table

kevingeorgex

Hello,

Thank you for this amazing Data Table plug in.

I run into this problem when i load the Data Table using Ajax. I have two links on the side panel. One is Feeds and other one is Contacts. Clicking Feeds will bring a Data Table with a fixed header. That's working fine. But when i bring up the Contacts by clicking 'contacts' link and when i scroll down the page, the fixed header from feeds page pops up.

It shouldn't pop up as a Data Table doesn't exist on contacts page. I have no idea why.
This is bothering me since a week. A help is much appreciated.

Here is the link to the problem - http://live.datatables.net/sifitova/1/edit
Debug code - olenam

Here is my ajax code

 function CallPage(link) {

        $.ajax({

            url: link,
            type: "GET",

            success: function(response) {

                $(".main-content").html(response);

                var table = $('#myTable').DataTable({
                    fixedHeader: true,
                    "pageLength": 50,
                    language: {
                        search: "<b>Filter for rows: </b>",
                        searchPlaceholder: "Type something.."
                    }
                });
            },

            error: function(jqXHR, textStatus, error) {
                console.log('The page was not loaded', error);
            }

        });
    }

kthorngren

Thanks for the test case!

I see a few problems.

1. The contacts table ID is "test" not "myTable". When you select contacts Datatables doesn't initialize with that table.

2. It looks like you are over writing the pages HTML with this:
   $(".main-content").html(response);

Before you do that you should destroy the Datatable using this:
$('#myTable').DataTable().destroy();

For example:

$('#myTable').DataTable().destroy();
$(".main-content").html(response);

Then initialize the new table.

EDIT: this next one should be number 3 not 1

1. The contacts table uses rowspan in the tbody which isn't supported by Datatables. This results in this error and the Datatable not initializing:
   Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

Fix these three things and it looks like it should work.

Kevin

kevingeorgex

Thanks for the reply.

Fixing the second point solved the issue. Now the Feeds data table fixed header is destroyed and not showing up on contacts page.

Mean while i had kept contacts table as a normal html table and not a data table. Hence not initializing it and using the row span.

Anyways thanks for your time