Dynamic Table Column and Row data

ljs015

Hi - I have a situation where I am building HTML Table headers dynamically, using a drop down selection list and ajax to hit a back end server to retrieve row data from a database. I display this data using bootstrap, but I would like to use DataTables.
After I have the HTML created I issue a call to DataTables, $('#salesResults').DataTable(); This fails. Any ideas on what needs to change? Thanks

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ljs015

Here is a test case in jsFiddle - https://jsfiddle.net/ljs015/2f7zjrkc/1/
Thanks!

kthorngren

Your test case doesn't run bu tI suspect the problem is that you are initializing Datatables before the columns are added to the DOM. Looks like you are using ajax to fetch the columns and building the columns in the success function. Move your Datatables init code inside the success function after the columns are added to the DOM. Where you have it now the init code runs before the Ajax request is complete.

If you still need help please adjust the test case to use simulated data, instead of ajax, to build the columns so we can help debug.

Kevin