How to render table before inserting it onto a page?

thijmendam

Hi all,

Is it possible to generate a table based on HTML that is not currently present in the DOM?

Scenario (NodeJS):

1. Client presses a button in the DOM
2. A call is made to the server which retrieves a HTML table
3. This table is appended to the DOM using JavaScript
4. _$('#myTable').DataTable(......) _ is invoked, which turns the raw HTML into a nice DataTable.

However, this approach has a drawback; because the raw table is appended to the DOM before .DataTable(...) is invoked, there is a split second where the raw table HTML is visible (rather than the generated DataTable).

To prevent this, I wonder if it is possible to render the table on the HTML retrieved from the server before it is inserted into the DOM:

1. Raw table HTML is retrieved from server
2. .DataTable(...) is invoked on this HTML
3. The HTML (which now contains the HTML as generated by .DataTables(...)) is inserted into the DOM.

Thanks for reading!

colin

You wouldn't be able to pass the HTML to DataTables, so that's a no-goer. But there are a couple of options

1. hide the table on page load, get the HTML loaded, then unhide it.
2. instead of passing HTML, pass JSON from the server to DataTables's ajax,

Colin

thijmendam

Alright. Thanks for the clarification!