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，则不会重新应用点击绑定(bind)。

在你的情况下，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";
}