向HTML表添加篩選

Question

我正在嘗試向HTML表添加篩選功能。我已經看到了一些HTML濾鏡庫，但是由於我在AJAX調用之後加載了表格的內容，這些庫在表格加載實際值後似乎沒有更新。

我想知道你是否可以指導我如何實現我自己的過濾器（也可以通過AJAX訪問要過濾的表的值列表）或如何「延遲」一段代碼HTML和JS，以便在數據被追加後將表和庫加載在一起。

告訴我你希望看到哪部分代碼。以下是加載表格的<script>。我試圖使用的庫是this和this。 我把這個編程作爲我父親的一個好處，所以這只是關於善良的問題。感謝大家！

---

<script> 
$(document).ready(function() { 
     var populateContadorClienteTable = function(r) { 
      var ClienteTable = $("#ClientesTable tbody"); 
      if(ClienteTable.length == 0) { 
       return; 
      } else { 
       ClienteTable.children().remove(); 
       var r = JSON.parse(r); 
       var ger, supe, con; 

       if(r.length > 0) { 
        for(var i in r) { 
         if(r[i].Gerente != null) ger = r[i].Gerente; else ger = ""; 
         if(r[i].Supervisor != null) supe = r[i].Supervisor; else supe = ""; 
         if(r[i].Contador != null) con = r[i].Contador; else con = ""; 

         ClienteTable.append(
          $("<tr>") 
           .append($("<td>").text(r[i].ClaveCliente)) 
           .append($("<a>").text(r[i].Nombre) 
            .css("width", "100%") 
            .addClass("pure-button") 
            .attr("href","reasignar.php?ClaveCliente=" + r[i].ClaveCliente + "&Nombre=" + r[i].Nombre)) 
           .append($("<td>").text(ger)) 
           .append($("<td>").text(supe)) 
           .append($("<td>").text(con)) 
           //.append($("<td>").append($("<a>").attr("href","reasignar.php?ClaveCliente=" + r[i].ClaveCliente + "&Nombre=" + r[i].Nombre) 
           // .text("Editar asignaciones"))) 
         ); 
        } 

       } else { 
        alert("No Cliente data retrieved."); 
       } 
      } 
     }; 


     $.ajax({ 
      type: "GET", 
      url: "/query/ClienteContadoresFull.php", 
      success: populateContadorClienteTable, 
      error: function(jqXHR, textStatus, errorThrown) { 
       alert("Error on retrieval of Cliente: " + textStatus); 
      } 
     }); 
}); 

</script> 

Answer 1

你可以嘗試DataTables。它有很多功能豐富的例子。

具體而言，您可以搜索example for AJAX sources。