Sort table with AJAX jquery

Question

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.

Answer 1

I would recommend you to check if the response you're getting is actualy JSON. Then, try using Firebug to get concrete error and post it here.