Question

我的Asp.Net网站应向用户显示一些表格数据。我使用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插入新内容，则排序失败。我的更新表代码是：

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

当tableorter在表上初始化时，它会将事件绑定添加到thead单元格和进程＆amp;从每个tbody单元格的文本创建缓存。

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

如果从ajax数据构建的新表具有相同的标题单元格＆amp;文本，那么所有需要做的就是清空tbody。只留下thead！在tbody重建并在表中就位之后，您可以通过触发表上的“更新”来更新tablesorter的缓存。

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

如果新的ajax数据确实彻底改变了表格，那么你将不得不重新初始化tablesorter。

Asp.Net：TableSorter在更新后无法正常工作

1 个答案: