Table based on dropdown selection ajax help!?

drc83

I have a page which has a dropdown box.

On selection a value is sent to a php script (Ajax), based on the value a html table is created

and sent back to the responseText.

The table is outputted to the html page, I want the table to have sortable columns, so I have used jquery datatables for this, but it is not working.

I have cut and pasted the exact table into the html and ran the page, and then sorting works.

Please can anyone help / advise to fix this?

Note the table output from the php is outputted inbetween ........ ...etc

Here is the rest of the code on the HTML page:

[code]


$(document).ready(function() {
$('table#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );




function selMetal(str,str2){
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","sql.php?m="+str+"&s="+str2,true);
xmlhttp.send();
}

[/code]

pimperish

This is kind of old, so I don't if you're still having an issue, but it seems like it's possible you are trying to create the datatable before the table data is there. Instead of creating the datatable on document ready, you should create it after you get the ajax result back
[code]
...
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
$("#example").dataTable()
}
...
[/code]

alternatively, and possibly better if you're going to be switching that select input more than once, you could return just the data for the table from the PHP as JSON and use the fnClearTable and fnAddData api methods