我在我的表中使用JS tablesorter,该表使用append方法填充了AJAX。
因此,当我进入第1页时,表排序器可以很好地工作。但是,当我进入第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">«</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">»</span>
</a>
</li>
</ul>
</nav>
</div>
你能帮我个忙吗?
最佳答案
您只应初始化一次tablesorter。
$(function(){
$('table').tablesorter();
var getData = {
// add rows here
$('table').trigger('update');
};
});
添加新数据后,使用
$('table').trigger('update');
通知表排序器内容已更改。