jQuery Tablesorter Pager 插件和 Ajax Update

Question

我有一个表排序器表，它目前工作正常，使用 ajax 方法来更新表数据。我已经添加了表排序器寻呼机插件，现在

$(.tablesorter').trigger("update");

函数在更新表格时，不更新寻呼机，寻呼机仍显示前一行/页数。

我正在使用：

    //init tablesorter
    $('#tblCustomers').tablesorter({
            headers: { 0: { sorter: false}},
            sortList: [[5,1]]               
    }).tablesorterPager({container: $("#pager")});
    //search listener
    $('input.search').change(function() {
                 $.post('search.php', { 'keyword' : $(this).val() }, function(data) {
                        $('#tblCustomers tbody').html(data);
                        $('#tblCustomers').trigger('update');
                 }
    });

请指教...

Answer 1

DanielCriC的答案几乎完美无缺，但寻呼机会跳过页面。我用我找到的另一个答案解决了这个问题，这就是我想出的：

function tableUpdated() {
$('#pager *').unbind('click');
$("#table") 
.tablesorter({
    // zebra coloring
    widgets: ['zebra']
}) 
.tablesorterPager({container: $("#pager")}); 
}

希望这有帮助，祝您编码愉快！

Answer 2

1. 请确保在更新数据库表后刷新容器
2. 请注意缓存，我会添加一个带有搜索的随机查询字符串.php（例如 search.php？cachebuster=arandomnumberhere ）以确保防止页面缓存。

有多种方法可以控制缓存。您可以通过htaccess，前面提到的随机数等在服务器上设置它。

Answer 3

function tableUpdated() {
    $('#tblCustomers').tablesorter({
        headers: { 0: { sorter: false}},
        sortList: [[5,1]]               
    }).tablesorterPager({container: $("#pager"), positionFixed: false});
}   
$(document).ready(function() {
   $('input.search').change(function() {
      $.post('search.php', { 'data': data } , function(data) {
        tableUpdated();
      });
   });  

事实证明，解决方案是将表初始化移动到一个单独的函数中，并在 $.post 的成功部分中调用它

经过数小时的谷歌结果阅读，这是我唯一有效的方法。