DT 1.10: Rendering datatable in hidden div results in misaligned columns

pclaar

I have a datatable that renders just fine here:

http://jsfiddle.net/pclaar/58vckhre/

but I'd like to render the table in a hidden div and then show it, so that there is less screen flickering during the page load.

So I made the enclosing div hidden and executed a jquery show method on the fnDrawCallback event. However, the resulting rendered table is out of whack...

http://jsfiddle.net/pclaar/th72nh12/

I know this question has been posted on the forums before, but all the solutions seem to revolve around deprecated API calls.

Thanks for any pointers anyone can provide.

Pete

allan

Use the columns.adjust() method when the table becomes visible (at least that is normally the issue).

I'm currently getting load errors in the two fiddles above from dev.schooldigger.com, but this is the update that should work: http://jsfiddle.net/th72nh12/1/

This conversion page might be useful in future when you want to find the new API method based on one of the old ones.

Allan

pclaar

Allan,

I apologize for the fiddle errors -- linked to a CSS file that was in my dev environment.

Calling this.api().columns.adjust() on the fnDrawCallback did the trick! Thanks for your help!

Just for others' benefit, I've fixed the jsfiddles:

Problem:

http://jsfiddle.net/pclaar/th72nh12/

Solution:

http://jsfiddle.net/pclaar/th72nh12/3/

Cheers,

Pete