带有分页和 AJAX 的 Tablesorter 错误

Question

我在我的 table 中使用 JS tablesorter，它使用 append 方法填充 AJAX；因此，当我在第 1 页时，table 排序器工作得很好。但是当我在第 2 或 + 页时，出现了一个错误，因为它正在对我进入之前的每一页的行进行排序。

这是我的 AJAX 填充 table:

 function getData(page){
    totalclientes =0;

    totalclientes = 0;
    var url = "../getters/getAtivosPainel.php?Lojas&offset="+page;
    var data = "";

       $.get(url, function(response){

         serverResponse = response;
         console.log(response);

             for(i in response.content){

                     data +='\
                 <tr>\
                    <td>'+response.content[i].LojaNome+'</td>\
                    <td>'+response.content[i].LojaBairro+'</td>\
                <td>'+response.content[i].LojaTelefone1+'</td>\
                    <td>'+LojaStatus+'</td>\
                    <td>'+response.content[i].PlanoNome+'</td>\
                     <td>'+response.content[i].Diferenca+'</td>\
                 </tr>';
             }

        $('#corpotabela').empty();
        $('#corpotabela').append(data);
        $('#qtd').empty();
        $('#qtd').append(response.count);
        $('table').tablesorter();



        var width = new Array();
        $(".table-body tr:eq(0)").find('td').each(function (position){
            width[position] = $(this).outerWidth();
        });
        $(".table-header tr").find('th').each(function (position){
            $(this).css("width", width[position]+2);
        });

    });
}

这是我的table

 <table class="table table-bordered table-hover" id="table">
            <thead style="border: 1px solid #ddd;" >
            <tr style="cursor: pointer;">
                <th>Nome</th>
                <th>Bairro</th>
                <th>Telefone</th>
                <th>Status</th>
                <th>Plano</th>
                <th>Dias para fim do plano</th>
                <th>Ações</th>
            </tr>
            </thead>
            <tbody id="corpotabela">

            </tbody>
        </table>
    </div>
    <div style="text-align:left; margin-top: -25px;">
        <nav id="navi">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <?php
                $j = 0;
                $k=1;
                for($i =$cnt; $i > 0; $i--) {
                    echo '<li><a id="datas" href="javascript:getData('.$j.')">'.$k.'</a></li>';
                    $j = $j+30;
                    $k++;
                }
                ?>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

你能帮我个忙吗？

Answer 1

您应该只初始化一次 tablesorter。

$(function(){

  $('table').tablesorter();

  var getData = {
    // add rows here
    $('table').trigger('update');
  };

});

添加新数据时，使用$('table').trigger('update');通知表格排序器内容已更改。

带有分页和 AJAX 的 Tablesorter 错误

Tablesorter bug with pagination and AJAX

html

javascript

ajax

jquery

tablesorter