Responsive table will not show data loaded via ajax, while it is in a hidden div

kakaja

Hello,

The idea is the following: There is a form. If submitted -> fired Ajax request that loads data to the dataTable which is in a hidden container. Once everything is loaded the table container is shown.

Problem: if the table container has display:none, once it is shown, the table has no data. Under the table is "Showing NaN to 198 of 198 entries". If the container is hidden with opacity: 0 -> everything is ok. Once opacity: 1, table is perfect.

But I need display:none, with it the table is empty.
Table has responsive and infinite scroll plugins.

Here is the debug of the page: http://debug.datatables.net/ovefoz

Please, would you have and idea how to make it work?
Thank you in advance.