Tablesorter錯誤與分頁和AJAX

Question

我在我的表中使用JS tablesorter，誰使用append方法填充AJAX; 因此，當我在頁面1中時，桌子很棒。但是，當我在第2我或+，一個bug出現導致其被在此之前，我在整理每一頁的行

這是我的AJAX誰填充表：

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 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');表示內容已更改的表格。