Tablesorter bug with pagination and AJAX

Question

I'm using JS tablesorter in my table, who is populate with AJAX using the append method; So, when I'm in the page 1, the tablesorter works great. But when I'm in the page 2 or +, a bug appears cause its is sorting the rows of every page before that I'm in.

this is my AJAX who populate the 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);
        });

    });
}

And this one is my 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>

Can you give me a help?

Answer 1

You should only initialize tablesorter once.

$(function(){

  $('table').tablesorter();

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

});

When new data is added, use $('table').trigger('update'); to signal tablesorter that the content has been changed.