jQuery tablesorter 插件在 AJAX 调用后不起作用

Posted 2023-05-09

技术标签:

【中文标题】jQuery tablesorter 插件在 AJAX 调用后不起作用【英文标题】：jQuery tablesorter plugin does not work after AJAX call 【发布时间】：2011-03-13 18:16:06 【问题描述】：

我在我的代码中使用了 jQuery 表格排序器插件。只要我不发出 ajax 请求来动态加载表数据，它就可以正常工作。我正在使用组合框通过 ajax 过滤表格的内容。我读了几篇文章说使用$("table").trigger("update"); 可以解决我的问题。我用我的代码试过了，但问题仍然存在。

还有其他方法可以解决这个问题吗？请帮我找出解决方案。我真的很糟糕。任何帮助，将不胜感激。以下是我的代码：

$(document).ready(function () 
    $("#myTable").tablesorter(
        widthFixed: true,
        widgets: ['zebra'],
        headers: 
            0: 
                sorter: false
            
        
    ).tablesorterPager(
        container: $("#pager")
    );

    $("#tag").change(function (event) 
        $('#myTable').trigger("update");
        $("#myTable").tablesorter();
    );
);

这里的tag是一个名为tag的组合框的id，myTable是带有sorter pager插件的表的id。

【问题讨论】：

你的 ajax 调用在哪里？ 【参考方案1】：

尚不清楚您用于进行 AJAX 调用的机制，但如果是 ASP.NET UpdatePanel，那么您需要在 AJAX 调用完成后重新绑定 jQuery 事件。

将以下内容添加到您的脚本中

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function(sender, args) 
    // Code to rebind your UI
);

注意：仅当您使用 ASP.NET AJAX 时才有效

【讨论】：

【参考方案2】：

新的 DOM 元素没有绑定到 javascript 事件。 jQuery 使用它的“实时”功能处理类似的问题。 AJAX 调用完成后，重新运行 document.ready() 中的 javascript。

【讨论】：

【参考方案3】：

我会将 tablesorter 函数包装在它自己的函数中。

然后，当您需要重新运行它时 - 只需再次调用它。

$(document).ready(function () 
    function resortTable() 
          $("#myTable").tablesorter(
            widthFixed: true,
            widgets: ['zebra'],
            headers: 
                0: 
                    sorter: false
                
            
        ).tablesorterPager(
            container: $("#pager")
        );
    

        $("#tag").change(function() 
            resortTable();
        );
);

【讨论】：

甚至不知道为什么会这样，但确实如此......我也在使用 jPaginator 进行分页，所以在我的函数中也添加了 BEFORE .. 干得好，一直在扯我的头发这一天！！！！ @Venkat Re OP：“这里的 tag 是名为 tag 的组合框的 id，myTable 是带有分拣机分页器插件的表的 id。” 它不起作用。我尝试了相同的代码。为什么 sorter() 不起作用。 @Venkat 值得注意的是这个帖子已经有 3 年历史了——事情可能已经改变了【参考方案4】：

问题是您在组合框更改时调用$('#myTable').trigger("update"); 代码，而不是在您从 AJAX 请求中获得响应时。如果您使用的是 ASP.NET AJAX，请尝试发布的代码 ericphan。如果您使用的是 jQuery AJAX，请尝试以下操作：

$.get('http://site.com/request-address', function(data) 

    // Code you're using to replace the contents of the table

    // Code to rebind the tablesorter
    $('#myTable').trigger("update");
    $("#myTable").tablesorter();
);

这样，您将 tablesorter 重新绑定到新的表格内容，而不是即将被替换的旧内容。

【讨论】：

【参考方案5】：

我会考虑为此使用 livequery 插件...它可以创造奇迹

http://docs.jquery.com/Plugins/livequery

【讨论】：

【参考方案6】：

我知道这是一篇旧帖子，但也许我的回答会帮助其他人在谷歌上搜索同样的问题。我通过调用解决了这个问题