Ajax dropdown php table sorting

Question

У меня есть страница с выпадающим списком. При выборе значение отправляется в php-скрипт (Ajax), на основе значения которого создается HTML-таблица и отправляется обратно в responseText. Таблица выводится на страницу HTML. Я хочу, чтобы в таблице были сортируемые столбцы, поэтому я использовал для этого таблицы данных jQuery, но она не работает.

Я вырезал и вставил точную таблицу в HTML и запустил страницу, а затем сортировка работает.

Пожалуйста, кто-нибудь может помочь / посоветовать исправить это?

Обратите внимание, что вывод таблицы из php выводится между ними:

<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

Где определен #example? Вы воссоздаете html для всей таблицы в ajax?

Если это так, вы, вероятно, перезаписываете элемент #example dom, которым уже манипулировал jquery dataTable. Попробуйте заново создать экземпляр таблицы данных после установки таблицы 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" } );
       } 
  }