Modal Loading message while script executes

I have tried several methods to solve this but have been unable to get a work around.

basically I have a large data table that is being given to the DOM by Java, as the page loads the data table loads but then is parsed by an external script (DataTables @ datatables.net) that styles and adds functionality to the grid.开发者_开发知识库 The problem is that the table shows up on the page un-styled and without the functions of the data tables script then disappears and reloads once the script is done executing.

What I want to do is hide the all the content on the page via jQuery on the page load then show it once the script executes and then close a modal loading dialog.

My question is: Is there a way to run a loading message via a modal until all scripts have executed. The data in the table is pretty large (2000 records) and takes some time to compile....

Thanks for any help!

The only way I could think of doing this would be to load the data and everything for it via ajax. That way, you can load a very quick page with not much on it and show the loading modal dialogue, the begin your ajax for the table which would send a response once finished that you could use to close the dialogue

What I would try to do is load the datatable into a hidden element like a

<div style="display:none">
     Put datatable here.
</div>

Show the modal that says loading(not with javascript, it should already be part of the DOM and visible), and in the callback for whatever JS is doing the work I would do something like this:

function myCallBack()
{
     $('#loadingModal').hide();
     $('#dataTableDiv').show();
}