在我的下拉过滤器之后，tablesorter 抓取原始数据答案

【问题标题】：tablesorter grabbing original data after my dropdown filter在我的下拉过滤器之后，tablesorter 抓取原始数据
【发布时间】：2019-03-15 09:51:27
【问题描述】：

我有一个表格，其中有几行，可以使用 tablesorter 进行排序。

<tbody id='filterTicket_body'>
 <tr><td>Field 1 Row 1</td><td>Field 2 Row 1</td><td>Field 3 Row 1</td></tr>
 <tr><td>Field 1 Row 2</td><td>Field 2 Row 2</td><td>Field 3 Row 2</td></tr>
 <tr><td>Field 1 Row 3</td><td>Field 2 Row 3</td><td>Field 3 Row 3</td></tr>
</tbody>

在同一页面上，我有一个用户可以过滤行的下拉列表。该下拉菜单会触发对 db 的 ajax 调用，以仅获取基于过滤器的结果。我清除了#filterTicket_body，然后用结果替换它。

        $('body').on('change','#ticketFilter',function(){
            var val = $(this).val();
            $('#filterTicket_body').html('');
            $.ajax({
                    type:"POST",
                    url:"support/ticketFilter.php",
                    data:"filter="+val,
                    success:function(result){
                            $('#filterTicket_body').html(result);
                    }
            });

    });

结果的一个例子就是一个表格行。

 <tr><td>Field 1 Row 2</td><td>Field 2 Row 2</td><td>Field 3 Row 3</td></tR>

假设用户选择了“第 2 行”。此过滤器将用 1 行数据替换 #filterTicket_body。到目前为止一切顺利。

现在，当用户点击表格标题进行排序时，使用默认的表格排序器，原来的 3 行数据会附加到结果中。所以我最终得到了

Row 2
Row 1
Row 2
Row 3

有什么想法吗？

【问题讨论】：

标签： jquery html-table tablesorter

【解决方案1】：

这里的解决方案是销毁 tablesorter 事件并在成功调用 ajax 后重新创建它。

【讨论】：

【解决方案2】：

最好通过触发更新事件来更新tablesorter的内部缓存：

success:function(result){
    $('#filterTicket_body')
         .html(result)
         .trigger('update');
}

【讨论】：