Asp.Net：更新后 TableSorter 不工作

Question

我的 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，我不知道为什么它在更新后失败了。谁能告诉我吗？

Answer 1

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

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

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

上触发 "update" 来更新 tablesorter 的缓存

$("#" + TableId).trigger('update');

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

Asp.Net：更新后 TableSorter 不工作

Asp.Net: TableSorter not working after update

asp.net

ajax

jquery

tablesorter