jQuery tablesorter - AJAX 调用后功能丢失

Question

我最近一直在尝试 jQuery 的 tablesorter 插件。我已经成功地启动并运行了一次，并且给我留下了深刻的印象。但是，我尝试将表排序器应用于不同的表，但遇到了一些困难......

基本上导致问题的表有 <ul>在它上面，它充当表格的一组选项卡。因此，如果您单击这些选项卡之一，则会进行 AJAX 调用，并且表中会重新填充与所单击的特定选项卡相关的行。当页面最初加载时(即在单击选项卡之前)，表排序器功能完全按照预期工作。

但是，当单击选项卡并重新填充表格时，该功能就会消失，使其不具有可排序功能。即使您返回到原始选项卡，单击另一个选项卡后，该功能也不会返回 - 唯一的方法是在浏览器中物理刷新页面。

我在这个网站上看到了一个与我的问题类似的解决方案，有人建议使用 jQuery 插件 livequery。我已经尝试过，但没有成功:-(

如果有人有任何建议，我将不胜感激。如果有帮助的话，我可以发布代码片段(尽管我知道 tablesorter 的实例化代码很好，因为它适用于没有选项卡的表 - 所以绝对不是那样!)

编辑: 根据要求，以下是一些代码片段:
正在排序的表是 <table id="#sortableTable#">..</table> ，我使用的tablesorter的实例化代码是:

$(document).ready(function() 
{ 
    $("#sortableTable").tablesorter(
    {
        headers: //disable any headers not worthy of sorting!
        {
            0: { sorter: false },
            5: { sorter: false }
        },
        sortMultiSortKey: 'ctrlKey',
        debug:true,
        widgets: ['zebra']
    }); 
});

我尝试按如下方式设置 livequery:

$("#sortableTable").livequery(function(){
   $(this).tablesorter();
});

但这并没有帮助...我不确定是否应该将表的 id 与 livequery 一起使用，因为它是对 <ul> 的点击。我应该做出回应，这当然不是表格本身的一部分。我尝试了多种变体，希望其中一种能有所帮助，但无济于事:-(

Answer 1

附加数据后，请执行以下操作:

$("your-table").trigger("update"); 
var sorting = [[0,0]]; 
$("your-table").trigger("sorton",[sorting]);

这会让插件知道它有更新，并重新排序。

文档中给出的完整示例:

$(document).ready(function() { 
    $("table").tablesorter(); 
    $("#ajax-append").click(function() { 
         $.get("assets/ajax-content.html", function(html) { 
             // append the "ajax'd" data to the table body 
             $("table tbody").append(html); 
            // let the plugin know that we made a update 
            $("table").trigger("update"); 
            // set sorting column and direction, this will sort on the first and third column 
            var sorting = [[2,1],[0,0]]; 
            // sort on the first column 
            $("table").trigger("sorton",[sorting]); 
        }); 
        return false; 
    }); 
});

来自此处的表排序器文档: http://tablesorter.com/docs/example-ajax.html