添加额外行后，tablersorter 不起作用答案

【问题标题】：tablersorter doesn't work after adding extra row添加额外行后，tablersorter 不起作用
【发布时间】：2012-11-27 15:25:14
【问题描述】：

我有一张下表。

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>No</th>
    <th>Name</th>     
    <th>Email</th> 
    <th class='time'>Time</th> 
    <th>Price</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>1</td>
    <td>Smith</td>    
    <td>jsmith@gmail.com</td> 
    <td class='time'>60 mins</td> 
    <td>45</td> 
</tr> 

</tbody> 
</table>

我正在使用 jquery tablesorter 插件。 Onready，tablesorter 运行良好。我可以看到所有列都可以排序。

在我的应用程序中，单击“刷新”按钮后，会动态添加或删除行。这意味着，表格内容将被更改。表修改后，排序不起作用。

这里是jsfiddle demo。

下面是调用tablesorter的代码。

   $("#myTable").tablesorter({
        headers: { 
            4: { sorter: "integer"}, 
            2: {sorter: false} 
        },
        debug:true,
        textExtraction:function(node){
           var $node = $(node)
           var text = $node.text();  
           if ($node.hasClass('time')) {
                text = text.replace('mins', '');
            };
            return text;            
        }
    });

在给定的演示示例中，添加的行成为第一行，不用于排序。

【问题讨论】：

这个问题似乎是这个问题的重复：stackoverflow.com/questions/4574057/…。
@SamuelCaillerie，+1 感谢您的通知，但我的要求不同，这里提供的答案最适合我 :)

标签： jquery jquery-plugins tablesorter

【解决方案1】：

对 API 文档的初步查看显示了此演示链接：http://tablesorter.com/docs/example-empty-table.html

关键是这行代码：

    // let the plugin know that we made a update 
    $("table").trigger("update");

如果您将其添加到您的代码中...

   $("#myTable").append(row).trigger("update");

... it works

【讨论】：

小心谨慎！！ .trigger("update"); 有其局限性。阅读the fix的介绍。

【解决方案2】：

要么将THE FIX 应用于Christian Bach 的原始版本，要么使用Mottie 改进的v2.x，HERE。

不要依赖未修复的原始版本中的.trigger("update")。

【讨论】：