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

当＆＃34;更新＆＃34;触发后，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";
}

jQuery tablesorter对我动态加载的表不起作用？

1 个答案: