Using AJAX XMLHttpRequest to populate table body

Devon

I previously was just submitting the page to itself to load everything and it worked fine, I just don't want to have to use all the page refreshes so I changed most of my content over to AJAX. I have played around with various things for hours and I am not sure what to do at this point.

I have two select boxes. After both have been chosen I use an AJAX request (call to a PHP function) to populate my DataTable. The table will always be populated with at least one row (usually multiple rows) after the call. I am echo'ing html to make the table rows instead of using rows.add(). The reason for this is frankly I am not sure how to go about passing the data for the rows back (because I need to pass multiple rows after they are queried from a DB) from the PHP function to the javascript where I can use rows.add(). The table fills perfectly fine.

The first problem is the rows don't format with the header (they don't align with the header).

The second problem is after filling it in this way I lose my single select functionality (which was working when I submitted the page to itself to load the table). I am assuming this is because I am filling the table AFTER it has been initialized without using rows.add().

Any input would be appreciated.

allan

If you could provide a link to the page you are working on it would be much easier to help - I'm somehow not quite getting it (end of a long day :-) ).

If you are Ajax loading the table with the ajax option then just use ajax.reload() if you want to reload the table.

Allan

Devon

I can't link the page because its local to the server here. I am trying to explain this the best I can.

Long story short I need to add rows to the table dynamically. After two select boxes are chosen, I am using a javascript AJAX call to a PHP function to load data into the table from a database. (I hope what I just said makes sense...)

Like this http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_database but using DataTables

So in the PHP function called I am using echo's to then get responseText in the javascript which I am then setting objects in the DOM to by id. (I hope that made sense too...)

Like: document.getElementById("TableBody").innerHTML = xhttp.responseText;

I am trying to add rows to the table in this fashion dynamically. The way I am currently doing it is echo'ing the html for table rows in the PHP file which I know I shouldn't be doing. I know I should be using table.row.add() but I am struggling to do this.

What I am currently trying to do is echo the javascript for the row.add() in my php file so that it will add the rows as it loops through the database query result. So far I haven't gotten this to work.

I hope this all clarified it a little bit....Thank you so much for any help you can offer. DataTables are fantastic. I love all the features they offer!

allan

You have to use the DataTables API (row.add() or rows.add()) you can't just write to the innerHTML of the table since DataTables won't know that that has happened.

The best think you could do is to use JSON rather than HTML in your return from the server. That would make things much easier for you!

Allan

Devon

Thanks for the recommendation. I did end up returning JSON and looping through the object to grab what I needed for row.add(). Works great now! Keep up the good work!