jQuery tablesorter - AJAX调用后功能丧失

Question

我最近一直在试验jQuery的tablesorter插件.我已成功完成并运行一次,并给我留下了深刻的印象.但是,我试图将tablesorter应用到不同的表中,只是遇到一些困难......

基本上导致问题的表有一个<ul>上面的表,它充当表的一组选项卡.因此,如果单击其中一个选项卡,则会进行AJAX调用,并重新填充表,其中的行与单击的特定选项卡相关.当页面最初加载时(即在单击选项卡之前),tablesorter功能完全按预期工作.

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

我见过一个解决方案,看起来与我在这个网站上的问题类似,有人推荐使用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();
});

这虽然没有帮助...我不确定是否应该使用带有livequery的表的id,因为它是<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; 
    }); 
});

从这里的tablesorter doc:http: //tablesorter.com/docs/example-ajax.html

Answer 2

你试过打电话吗

$("#myTable").tablesorter();

在处理选项卡点击并重新填充表格的代码之后？？？如果没有，请尝试一下。