jQuery tablesorter不能在我的動態加載的表上工作？

Question

我想在動態加載的表上使用jquery.tablesorter.js。我可以在運行時加載的表上完美工作，但不能在由Ajax構建的表上工作。

我跟着很多以前的技巧，我發現在這裏無濟於事。目前我正在運行一個腳本來在頁面加載時調用table sorter，點擊一個按鈕，我的表格就會生成，並且在表格加載到我的頁面後，我會調用table sorter的更新。

我有以下代碼。

<!-- 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"; 
}