Ajax下拉式php表排序

Question

我有一个页面有一个下拉框。在选择时，根据创建的html表的值，将值发送到php脚本（Ajax）并发送回responseText。该表格被输出到HTML页面。我希望表具有可排序的列，所以我已经使用了jQuery数据表，但它不起作用。

我已经将精确的表格剪切并粘贴到html中，然后运行该页面，然后进行排序工作。

请谁能帮助/建议解决这个问题？

<a div id="txtHint"> <table id="example"> <div> 

这里是代码的HTML页面上的其余部分：

<script type="text/javascript" src="/js/jquery-1.5.1.js"></script> 
<script type="text/javascript" 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> 

Answer 1

凡被定义＃示例

注意从PHP输出的表其间输出？你是否在ajax中重新创建整个表的html？

如果是这样，你可能会覆盖jquery dataTable已经处理的#example dom元素。尝试在设置表html之后重新实例化数据表，例如：

 
xmlhttp.onreadystatechange=function(){ 
     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
      $('table#example').dataTable().fnDestroy(); // might need to destroy the old one first - not sure 
      $('table#example').dataTable({ "sPaginationType": "full_numbers" }); 
     } 
    }