Question

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

这是我填充表格的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');向表格内容发出内容已更改的信号。

使用分页和AJAX的tablesorter错误

1 个答案: