thead not visible / 0px height

shameless

Alan,

I don't know if this is related to the JSONP issue solved this past weekend, but here goes:

I have initialized a Datatable and everything appears "okay" except the headers are missing.

The first thing that I tried was something that you had pointed me to on an earlier thread (http://datatables.net/forums/comments.php?DiscussionID=1035&page=1 and http://datatables.net/forums/comments.php?DiscussionID=1035&page=1) which was to apply fnAdjustColumnSizing(). I tried that even though the DT is always visible, that is, it is not embedded in a JQuery widget like a Tab or Accordion. It is just a plain old HTML table sitting in a page that is populated with the JSONP request.

Here's the initial state of the page: http://pastebin.com/60VQ93sQ
Here's the JQuery script with the DT init: http://pastebin.com/wgKfsr5S

The problem is the same as when the DT is embedded in a JQuery widget though. is invisible because it has no height.

Any other tricks to fix this other than calling fnAdjustColumnSizing()?

Shameless

allan

I'm a little bit stuck with this one off the bat I'm afraid. I can't think of any particular reason that the header elements wouldn't be given any height. The inner header elements will be like that - but there should be outer elements as well - just above the scroller, which give the table a header. I can't remember from your other thread - is there any chance I can see this in action? Or a screenshot of what is happening?

Thanks,
Allan

shameless

Don't you ever sleep? :)

Here is the Generated Source: http://pastebin.com/9UwgmuLX
Here is a screen shot: http://dl.dropbox.com/u/26511966/jsonp_dt_missing_head.png

You should be able to link to all of the .js files in the "initial state of the page" link above as there is an .htaccess rule to allow those files off the server. The "actual" location is behind Expression Engine.

Perplexing stuff. As mentioned earlier< I have applied fnAdjustColumnSizing() and I can see that the JSONP data is actually retrieved a second time following the initialization--I believe as a result of fnAdjustColumnSizing(). And I thought that there might be something odd going on the JSONP function since fnAdjustColumnSizing() solves the problem on plain old AJAX load.

Regards,

Shameless

shameless

Scratch the "problem" portion of this ticket.

I removed the class from the "body" tag that kept the page invisible until it was finished loading and the DT displays fine.

Still a little perplexed in that fnAdjustColumnSizing() is not recovering even after the body contents are made visible, but it is not a biggee at the moment.

Shameless

allan

I'm surprised that the table header is missing completely! Normally what I would expect in this situation is for the header to be visible, but completely out of alignment with the columns - the is what fnAdjustColumnSizing will do - bring it back into alignment.

It might be interesting to see if something like this fixes the problem - albeit a few seconds after page initialisation (so not a great final solution, but possibly a start to one...)

[code]
setTimeout( function () {
alertTable.fnAdjustColumnSizing();
}, 3000 );
[/code]
Allan

allan

Oh one other thing - it might be worth adding in:

[code]
"fnInitComplete": function () {
this.fnAdjustColumnSizing()
}
[/code]
to your DataTables' initialisation...

Allan