Forums » PHP e MySQL

Paginação simples em jQuery/Javascript

    • 466 posts
    12 de agosto de 2014 00:46:16 ART

    Paginação simples em jQuery/Javascript

    Uma forma de fazer paginação exclusivamente com jQuery/Javascript é ter os dados num vetor Javascript e então aplicá-los numa tabela com uma função específica.

    Por exemplo, você pode usar o PHP para gerar o seguinte vetor (ou retorná-lo em formato JSON numa chamada Ajax):

     

    var dados = [
    ['Banana', '10,00'],
    ['Maça', '2,00'],
    ['Pera', '6,00'],
    ['Goiaba', '3,25'],
    ['Tamarindo', '1,50'],
    ['Cenoura', '0,75'],
    ['Alface', '0,99'],
    ['Tomate', '3,21'],
    ['Abacaxi', 'N/D'],
    ['Kiwi', '99,50'],
    ['Cebola', '1,15'],
    ['Alho', '1,02'],
    ['Abóbora', '4,75'],
    ['Pêssego', '2,33'],
    ['laranja', '2,99']
    ];


    Imagine então um HTML básico contendo uma tabela vazia e os botões para avançar e retroceder, como segue:

     

    <table>
    <thead>
    <tr>
    <th>Descrição</th>
    <th>Valor</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td colspan="2" align="center">Nenhum dado ainda...</td>
    </tr>
    </tbody>
    </table>
    <div>
    <button id="anterior" disabled>‹ Anterior</button>
    <button id="proximo" disabled>Próximo ›</button>
    </div>


    Aí você vai precisar de alguns elementos fixos no código Javascript para determinar o tamanho da página de dados e qual é a página atual:

     

    var tamanhoPagina = 6;
    var pagina = 0;


    Também é necessário ter uma função para preencher os dados da página atual na tabela:

     

    function paginar() {
    $('table > tbody > tr').remove();
    var tbody = $('table > tbody');
    for (var i = pagina * tamanhoPagina; i < dados.length && i < (pagina + 1) * tamanhoPagina; i++) {
    tbody.append(
    $('<tr>')
    .append($('<td>').append(dados[0]))
    .append($('<td>').append(dados[1]))
    )
    }
    }


    Seria interessante uma função para ativar ou desativar os botões Próximo e Anterior quando estivesse na último ou na primeira página, respectivamente. Também poderia desativar caso tivesse apenas uma página:

     

    function ajustarBotoes() {
    $('#proximo').prop('disabled', dados.length <= tamanhoPagina || pagina > dados.length / tamanhoPagina - 1);
    $('#anterior').prop('disabled', dados.length <= tamanhoPagina || pagina == 0);
    }


    Por fim, precisamos colocar o evento para avançar e retroceder nas páginas, além de inicializar tudo isso no carregamento da página HTML:

     

    $(function() {
    $('#proximo').click(function() {
    if (pagina < dados.length / tamanhoPagina - 1) {
    pagina++;
    paginar();
    ajustarBotoes();
    }
    });
    $('#anterior').click(function() {
    if (pagina > 0) {
    pagina--;
    paginar();
    ajustarBotoes();
    }
    });
    paginar();
    ajustarBotoes();
    });

    Exemplo funcional no jsfiddle


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