Ajax dropdown select and grids (PHP)

I am currently trying to build an Ajax / PHP grid based on a dropdown selection.

Firstly on the page I have a dropdown select box, on selection a variable is passed to a PHP page which executes a select statement, and I echo a table grid out to the page.

I have been using the library jquery / jquery.dataTables.js to make the table sortable and easy to navigate. The table / grid is outputted but sorting the columns and paging is not working can anyone help Ps. I have tried other grid libraries as well and the do not work????

Please see the code below thats being used:

<script type="text/javascript" src="/js/jquery-1.5.1.js"></script>
<script type="text/java开发者_运维知识库script" src="/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() {
    $('table#example').dataTable( {
        "sPaginationType": "full_numbers"
    } );
} );
</script> 


<script type="text/javascript">
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();
}
</script>

Then the php script echos the table out inbetween

Thanks for you help in advance.

You need not use detect browser and make ajax call. Just use .ajax() method. You should use this code:

<script type="text/javascript">

function selMetal(str,str2){
    if (str==""){
    document.getElementById("txtHint").innerHTML="";
        return;
    } 

    $.ajax({
      url: "sql.php",
      data: {m:str, s:str2},
      success: function(data) { $("#txtHint").html(data); },
      dataType: "html"
    });

}

</script>

Not sure this will solve your problem or not. Give a try :-)