Forums » jQuery

Manipulação avançada de JSON + jQuery + tablesorter

    • 466 posts
    12 de agosto de 2014 02:22:56 ART

    Manipulação avançada de JSON + jQuery + tablesorter

    Pois é, depois de muito tempo sem postar nenhum artigo, estou de volta (estou ouvindo os gritos de alegria da multidão de leitores hehehe) hoje vou abordar um tema que representa 60% dos acessos do meu blog, jQuery + JSON porém um pouco mais avançadinho, integrando com o plugin tablesorter, para os iniciantes aconselho a leitura do primeiro post que fiz sobre jQuery com JSON Manipulação de JSON com jQuery.

    Vou explicar de forma sucinta o cenário que precisei desenvolver recentemente, logo abaixo segue uma imagem para representar graficamente.

     

    tabela json + jQuery + tableSorter

    Então vamos lá,
    eu precisava popular uma tabela com dados dinâmicos da fatura dos cartões dos usuários, com mais “algumas” regrinhas de negócio, claro neh, nunca é tão simples assim…
    O usuário ao acessar a página visualiza a fatura do mês corrente, podendo navegar entre as 2 últimas faturas (anteriores a corrente), a mesma deve ser ordenável, zebrada e diferenciar determinados lançamentos (como créditos ou débitos específicos) e quando necessário deve conter paginação, com um detalhe pequenino porém extremamente importante, tudo por ajax, quando o usuário clicar em faturas anteriores, deverá recarregar apenas a seção da fatura.

    Oooookkkkkk meus quéridos leitores, a princípio a brincadeira era bem fácil, montar uma tabelinha lendo dados externos no formato JSON, molezinha, utilizei o método $.getJSON do jQuery e populei a tabelinha.

     

    Formato do JSON gerado para o parse:


    {"DADOS":[ 
    	{ 
    		"estabelecimento":"Casa do Pão de Queijo", 
    		"dia":"12/10/2010", 
    		"valor":"7.90", 
    		"lancamento":"gcd-extrato-debito", 
    		"credito":"", "descricao":"" 
    	}
    ]}
     

    Código estático da tabela (xHTML)

    <div id="gcd-ct-extrato">
    <table id="extrato-usuario" class="tablesorter"> 
    <thead> 
    <tr> 
    <th>Estabelecimento</th> 
    <th class="gcd-extrato-centro">Data</th> 
    <th class="gcd-extrato-centro">Valor (R$)</th> 
    </tr> 
    </thead> 
    <tbody>
    </tbody> 
    </table>
    </div>

    Código jQuery para o parse do JSON

    $(function(){
    $("#gcd-ct-extrato").addClass("gcd-loading");

    $.getJSON("json/extrato.json", function(data){
    $.each(data.DADOS, function(i, item){
    $("#extrato-usuario tbody").append(
    '<tr class="+ item.credito +" title="' + item.descricao + '">
    <td>'+item.estabelecimento+'</td>
    <td class="gcd-extrato-centro">' + item.dia + '</td>
    <td class="gcd-extrato-centro ' + item.lancamento +'">' 
    + item.valor + '
    </td>
    </tr>');
    });
    $("#extrato-usuario")
    .tablesorter({widthFixed: true,widgets: ['zebra']})
    .tablesorterPager({container: $("#pager")});
    $("#gcd-ct-extrato").removeClass("gcd-loading");
    });
    });

    Vamos por partes senhores:


    Primeiro: $("#gcd-ct-extrato").addClass("gcd-loading");
    Estou incluindo na div gcd-ct-extrato a classe gcd-loading, que nada mais é do que um gif como background para aparecer enquanto o conteúdo JSON é carregado. (Muito importante, pois mostra para o usuário que alguma coisa está sendo carregada).

    Segundo: $.getJSON("json/extrato.json"...
    Estou utilizando o método $.getJSON para carregar o arquivo externo e em seguinda faço um laço com o método $.each apendando os valores do JSON dentro da tag TR e TD.

    Terceiro: ...function(data){...
    Reparem que ao final da chamada do arquivo JSON, estou passando uma função de callback, é através desse camarada que posso controlar o tempo exato para iniciar o plugin do tablesorter e zebrar a tabela, pois primeiro é necessário que a marcação da tabela esteja construida para assim executar o método sobre ela.

    Quarto: $("#extrato-usuario").tablesorter({widthFixed:true,widgets:['zebra']});
    Após a execução do método $.each, executo o método do tablesorter na tabela criada para orderná-la.

    Quinto: .tablesorterPager({container: $("#pager")});
    Após chamar o método do tablesorter, chamo o tablesorterPager para realizar a páginação da tabela caso necessário, para isso, precisamos carregar o plugin do pager que se encontra disponível na página do tablesorter, o código html necessário para gerar a páginação eu disponibilizo abaixo, reparem que estou definindo no input hidden um valor 10, que se refere a quantidade de “itens por página”:

     

    <div id="pager" class="pager">
    <form>
    <ul class="gcd-paginacao-faturas">
    <li><a href="#" class="prev">< anterior</a></li>
    <li><a href="#" class="next">próximo ></a></li>
    </ul>

    <input type="hidden" value="10" class="pagesize" />
    </form>
    </div>

     

    Sexto e último (aleluiaaaaa, por hoje hehehe): $("#gcd-ct-extrato").removeClass("gcd-loading");


    Depois que a tabelinha estiver desenhada, ordenável, zebrada e com paginação, eu removo a classe com o gif de carregando conteúdo.

    Pois é senhores, essa é a primeira parte desse artigo, vou colocar a segunda parte em outro, na sequência, mostrarei como carregar as faturas anteriores, fazendo com que o tablesorter funcione, pois ele buga… hehehe, ainda vai rolar uma animação para indicar ao usuário a troca da fatura atual pela anterior, marcando a nova fatura ativa. Abaixo estou disponibilizando o arquivo final para vocês estudarem o código… (-:

     

    Clique aqui para visualizar o arquivo completo funcionando.



    Este post foi editado por Oliveira Dario em 12 de agosto de 2014 02:24:36 ART"