Column width change while sorting/paging while hiding the first draw

volans

Hi,

I've an HTML table that take few seconds to load with DataTables and as a result the rendering process make the table all move around while loading. To both slightly speed up the process and make it nicer for the user, I have set the table with display: none in the HTML and then I remove the hiding class with a callback in initComplete.

Unfortunately I have now the side effect that the column width changes when sorting/paging, I guess because during the init being the table in display: none mode DataTables is not able to properly calculate the max width of each column.

Example demo available at http://live.datatables.net/lizabomu/1/ , just sort by any column and/or navigate to another page to reproduce.
If you show 100 items (all) and then back to 10, it's not possible to reproduce anymore, I guess because at that point DataTables was able to see all the data and properly calculate the column widths.

The differences from the default example are:
* HTML: add hide-loading class to the table tag
* CSS: define the hide-loading to set display: none
* JS: define initComplete callback to remove the hide-loading class from the table tag

I would really like to be able to keep the table in the HTML and not load it via AJAX (is kinda a requirement that I have).

Do you have any suggestion on how to achieve the same result of hiding the first load of an HTML table without loosing the ability for DataTables to correctly set the column width?

Thanks in advance!