Asp.Net:更新后 TableSorter 不工作

Asp.Net: TableSorter not working after update

我的 Asp.Net 网站应该向用户显示一些 table 数据。我使用 TableSorter 在客户端对这些数据进行排序:

<script>var $jQuery171 = jQuery.noConflict();</script>

    <script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>  
    <script type="text/javascript">
        $jQuery171(document).ready(function () {
            $jQuery171('#myControl').tablesorter();

        });
    </script>

排序很好,没有任何问题,但是如果我删除当前数据并从 AJAX 插入新数据,排序就会失败。 我的更新代码 table 是:

function JSonObjectPropertiesToHeader(JSonObject, TableId) {
    $("#" + TableId).empty();
    var tableForProcess = document.getElementById(TableId);
    var header = tableForProcess.createTHead();
    var rowOfHeader = header.insertRow(0);
    for (var propertyName in JSonObject.SourceData[0]) {
        var theadCell = document.createElement('th');
        theadCell.innerHTML = propertyName;
        rowOfHeader.appendChild(theadCell);
    };

    return header;
}    

function JSonObjectsToBody(JSonObjects, RequiredProperties, TableId) {
    var tableForProcess = document.getElementById(TableId);
    var body = tableForProcess.createTBody();
    for (var i = 0, item; item = JSonObjects.SourceData[i]; i++) {
        var rowOfBody = body.insertRow(0);
        for (var propertyName in RequiredProperties) {
            var cellForInsert = rowOfBody.insertCell(rowOfBody.cells.length);
            cellForInsert.innerHTML = item[propertyName];
        }
    };
}

和AJAX脚本:

<script>

        function GetDevicesInfoContent() {
            $.ajax({
                type: "POST",
                url: "myUrl",
                data: "{Lang:'tr'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) { OnGetDevicesInfoSuccessContent(response); },
                error: function (response) { OnGetDevicesInfoError(response); }
            })
        }

        function OnGetDevicesInfoSuccessContent(response) {
            var devicesInfoControlId = "<%=report2_gridView.ClientID%>";
            $("#" + devicesInfoControlId).empty();
            if (response.d.length > 0) {
                var jsonObject = eval('(' + response.d + ')');
                var header = JSonObjectPropertiesToHeader(jsonObject, devicesInfoControlId);
                var requiredProperties = [];
                for (var i = 0, cell; cell = header.rows[0].cells[i]; i++) {
                    requiredProperties[cell.innerHTML] = cell.innerHTML;
                };
                JSonObjectsToBody(jsonObject, requiredProperties, devicesInfoControlId);
            }
        }

    function OnGetDevicesInfoErrorContent(response) {
        alert("MyError:" + response.status + " " + response.statusText);
    }

</script>

如果我再次应用 tablesorter,则排序正常。我以前从未使用过 TableSorter,我不知道为什么它在更新后失败了。谁能告诉我吗?

当 tablesorter 在 table 上初始化时,它将事件绑定添加到 thead 单元格并处理并从每个 tbody 的文本创建缓存细胞.

$("#" + TableId).empty(); 被执行时,它基本上清除了所有内容,包括事件侦听器。

如果从 ajax 数据构建的新 table 具有相同的 header 单元格和文本,那么需要做的就是清空 tbody。别管 thead 了!在 tbody 重建并在 table 中就位后,您可以通过在 table.

上触发 "update" 来更新 tablesorter 的缓存
$("#" + TableId).trigger('update');

如果新的 ajax 数据确实完全改变了 table,那么您将不得不重新初始化 tablesorter。