jQuery Tablesorter Pager 插件和 Ajax 更新

Question

我有一个 tablesorter 表，目前工作正常，使用 ajax 方法更新表数据。我添加了 tablesorter Pager 插件，现在添加了

$(.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

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

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

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

Answer 2

1. 确保在更新数据库表后刷新容器
2. 注意缓存，我会在 search.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 的成功部分中调用它

在阅读谷歌搜索结果数小时后，这是唯一对我有效的方法。