動的にロードされたテーブルでjQuery tablesorterが動作しませんか？

Question

私は動的にロードされたテーブルでjquery.tablesorter.jsを使用しようとしています。実行時にロードされるテーブルで完璧に動作するようにしても、Ajaxによって構築されたテーブルでは動作しなくても構いません。

私がここで見つけた多くの先のヒントに従わなかった。現在、私はテーブルを構築するためのボタンをクリックして、ページのロード時にテーブルソーターを呼び出すスクリプトを実行しています。テーブルがページにロードされた後、テーブルソーターの更新を呼び出します。

私は以下のコードを持っています。

<!-- SCRIPT TO CALL TABLESORTER BEFORE TABLE IS BUILT --> 
<script> 
    $(document).ready(function() { 
     $("#Observation").tablesorter();    
    } 
    ); 
</script> 


<!-- SCRIPT TO BUILD TABLE AND CALL TRIGGER UPDATE TO TABLESORTER --> 
<script> 
    function loadObservations(status) { 
     var xhttp = new XMLHttpRequest(); 
     var a = 'Status=' + status; 
     xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       buildOpenTable(this); 
      } 
     }; 
     xhttp.open("POST", "http://localhost:57766/PALWebService.asmx/ObservationResult", true); 

     xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

     xhttp.send(a); 
    } 
    function buildOpenTable(xml) {    
     var i; 
     var xmlDoc = xml.responseXML; 
     var table = "<thead><tr><th>ID</th><th>SITE</th><th>BUILDING</th><th>OBSERVATION</th><th>ACTION</th><th>DATE OBSERVED</th><th>UPDATED BY</th><th></th></tr></thead>"; 
     var x = xmlDoc.getElementsByTagName("CurrentObservation");    

     for (i = 0; i < x.length; i++) { 
      table += "<tbody><tr><td class=col1>" + 
       x[i].getElementsByTagName("GUID")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       x[i].getElementsByTagName("SITE")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       x[i].getElementsByTagName("BUILDING")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       x[i].getElementsByTagName("OBSERVATION_DETAIL")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       x[i].getElementsByTagName("ACTION")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       x[i].getElementsByTagName("DATE_OBSERVED")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       x[i].getElementsByTagName("UPDATED_BY")[0].childNodes[0].nodeValue + 
       "</td><td>" + 
       "<span class=btnSelect id=btnSelect>Select</span>" + 
       "</td ></tr ></tbody> "; 
     } 
     document.getElementById("Observation").innerHTML = table;   
     $("#Observation").trigger("update"); 
     window.location.hash = "#tableSummary";    
    } 

</script> 


<!-- TABLE SUMMARY OF OBSERVATIONS --> 
<div class="container-fluid" id="tableSummary"> 
    <h3 class="text-center">Observation Summary</h3> 
    <div class="table-responsive"> 
     <table id="Observation" class="tablesorter table table-condensed table-hover table-bordered" style="background-color:white"></table> 
    </div> 
</div> 

Answer 1

"更新"がトリガーされると、tablesorterはtbodyの内容が変更されることを予期しています。 theadの変更はすべて無視され、theadを完全に置き換えた場合、クリックバインディングは再適用されません。 theadが変更されていないことが表示されますので、私は唯一のtbodyを修正推薦する、あなたのケースで

：

function buildOpenTable(xml) { 
    var i; 
    var xmlDoc = xml.responseXML; 
    var tbody = ""; 
    var x = xmlDoc.getElementsByTagName("CurrentObservation"); 

    for (i = 0; i < x.length; i++) { 
     tbody += "<tr><td class=col1>" + 
      x[i].getElementsByTagName("GUID")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      x[i].getElementsByTagName("SITE")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      x[i].getElementsByTagName("BUILDING")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      x[i].getElementsByTagName("OBSERVATION_DETAIL")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      x[i].getElementsByTagName("ACTION")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      x[i].getElementsByTagName("DATE_OBSERVED")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      x[i].getElementsByTagName("UPDATED_BY")[0].childNodes[0].nodeValue + 
      "</td><td>" + 
      "<span class=btnSelect id=btnSelect>Select</span>" + 
      "</td ></tr >"; 
    } 
    $("#Observation tbody").html(tbody); 
    $("#Observation").trigger("update"); 
    window.location.hash = "#tableSummary"; 
}