Question

我有一个表，其中有几行，可以使用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”。此过滤器会将#filterTicket_body替换为1行数据。到目前为止一切顺利。

现在，当用户单击表标题进行排序时，使用默认的表排序器，原始的3行数据将添加到结果之前。所以我结束了

Row 2
Row 1
Row 2
Row 3

有什么想法吗？

Answer 1

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

Answer 2

最好通过触发更新事件来更新表排序器的内部缓存：

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

tablesorter在我的下拉过滤器之后获取原始数据

2 个答案: