I'm trying to sort my table with the JS tablesort, who is populate with JSON, and the follow error appear to me
"Cannot read property '0' of undefined"
Looks like the tablesort dont recognize the ajax data.
This is my jquery
$.get(url, function(response){
serverResponse = response;
for(i in response.content){
totalclientes++;
var status = response.content[i].LojaStatus;
if(status == 0){
LojaStatus = "Ativo";
botao = '\ ' +
'<div class = "btn-group"> <button type = "button" class = "btn btn-primary" onclick="redirect(' + response.content[i].LojaId + ')" data-toggle="modal" data-target="#myModal">Editar</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "javascript:deletar(' + response.content[i].LojaId + ')">Desativar</a></li> <li><a href = "http://amovitrine.devmaker.com.br/relatorioloja.php?LojaId='+ response.content[i].LojaId +'">Relatorio</a></li> </ul> </div>';
}else{
LojaStatus = "Inativo";
botao = '\ ' +
'<div class = "btn-group"> <button type = "button" class = "btn btn-primary" onclick="redirect('+response.content[i].LojaId+')" data-toggle="modal" data-target="#myModal">Editar</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "javascript:ativar('+response.content[i].LojaId+')">Ativar</a></li><li><a href = "http://amovitrine.devmaker.com.br/relatorioloja.php?LojaId='+ response.content[i].LojaId +'">Relatorio</a></li> </ul> </div>';
}
var botao =
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].LojaInicioPlano+'</td>\
<td>'+response.content[i].LojaFimPlano+'</td>\
<td>'+botao+'</td>\
</tr>';
}
$('#corpotabela').empty();
$('#corpotabela').append(data);
This 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>Data Inicio</th>
<th>Data Fim</th>
<th>Ações</th>
</tr>
</thead>
<tbody id="corpotabela">
</tbody>
</table>
Any suggestions?
*EDIT This is my table right now
*EDIT 2
this is a example of object in my response
EDIT 3 - THE SOLUTION
Basically I was using the tablesorter out of the getData function, who populate me table.
So, i apply the tablesorter after $('#corpotabela').append(data);
line and it works great.