dataTable seems to be initializing as the css is applied but there is no functionality
dataTable seems to be initializing as the css is applied but there is no functionality
dyetube
Posts: 20Questions: 5Answers: 0
I am populating a page with (possibly) multiple datatables by:
(in the <head> of the HTML document):
Read an external .JSON file.
Get number of columns for the table(s) and the table header(s)/footer(s) names along with column variables.
Build HTML table(s) based off the number of arrays in the the .JSON and append to the HTML document.
Populate the header(s)/footer(s) with the names from the .JSON file thereby setting the number of columns.
Populate the HTML table(s) with the data from the. JSON file.
(in the <body> of the HTML document right before the </body> tag)
- Initialize the datatable(s) using the document ready function and append the button div(s) so there is a print button option for the table(s).
I currently have 3 datatables that should populate and be initialized but the script never gets past the first init.
I'm thinking that somehow this is an asynchronous issue but can't figure it out.
Here's the fiddle of my init script: http://jsfiddle.net/9stvn7c3/2/
Here's the fiddle of my Header script: http://jsfiddle.net/fxm7pL4m/
I am running the HTML locally so don't have a server where you can view the page but can upload the files if need be.
Thanks,
Jeff
This question has accepted answers - jump to:
Answers
Yup. you have an async problem. You can't use document ready as a trigger on init for DT because as far as jquery is concerned, the document is "ready" long before all that ajax data comes back. You'll need to move that DT init into the success event of your last ajax call. I've used semaphores to control this sort of "Wait until everyone is ready" logic. One ajax success sets a "I'm done" flag. When the second ajax completes, it loops until the first flag is true, then it continues and inits Datatables. Of course I'm not using a loop, I'm using setinterval().
So I moved the init to the
success:event of thejquery.ajaxfunction in the head and when viewing the console can see that the init occurs after the table is populated with the data ( I used someconsole.log's to show me plus I stepped through the functions while debugging as well), but my buttons are still not showing nor do I have column sorting or the search box populating. I no longer think it's an async problem but still not sure what it could be...I'm intializing the table with the
var table = $('datatable').Datatable ({});. Then to populate the div with the buttons I use:table.buttons( 0, null ).containers().appendTo( '#buttons' );.When I put a breakpoint on the
table.buttons, I never reach the breakpoint. For some reason everything stops after thevar table =is run.not
There is an article on why that capital T matters, somewhere.
You've got this in your code
So I think you want (for a value i=1)
I actually do have it as
$('#example').DataTable();in my code, when I retyped it here, I forgot to use the capital t. One thing I am noticing is that I'm getting a "TypeError: e is undefined" error from the jquery.datatables.min file. I know it's not a error with that file but It's in my code.I forgot to ask the basic question, "Does it work if you remove all the Buttons code?"
Nope. Just tried it and no luck.
post an example of the html out put,
https://jsfiddle.net/scrsn365/
thanks, but I mean, post some of the HTML output from the code, with data.
I'm thinking it's some type of formatting issue. I'm trying to populate the table from the JSON like this: https://jsfiddle.net/vLLcspr7/ Which is where I am having the issue. If I populate like this: https://jsfiddle.net/c41bqtue/ It works just fine.
This issue was a formatting issue. I was adding an extra
<td>tag at the end of each line so the formatting was off and throwing an error.