How to load DataTable from external html file

aoster

Hi all,

I've just started to use DataTables and jquery and have run into a problem to which I do not find a solution for.

This is what I try to accomplish:

I have created a menu using bootstrap and a DIV container into which I load different content from external HTML files,
when selecting one of the menu entries. This does work without a problem when using static HTML code but when I
try to load a page containing a table (DataTables), the table does not work.

I load external content via:

$(document).ready(function(){ $("#customer").click(function(){ var page = $(this).attr('value'); $("#main-content").load( page + ".html"); }); });

When I put all the jquery and DataTables JS and CSS scripts also in the external HTML file, the dynamically loaded table works but it will break some of the main page functionality. I would prefer do the includes only on the main page.

Can someone give me a hint or help with some example code ?

Thank you very much for your kind help.

best regards

Andreas

allan

Sounds like you need to use the load callback of the jQuery load() method to execute code once the external content has been loaded.

Allan

aoster

Hello Allen,

thank you for you tip. I actually had an error in my JS includes which prevented the table to work as expected.

The issue is resolved now :-)

best regards

Andreas

allan

Hi Andreas,

Thanks for the feedback - good to hear you have it working now.

Allan