24

Estou à procura de uma paginação simples, sem estilos CSS, nem nada do género. Apenas com os botões em baixo para mudar de página e com os elementos em cima. Estou a perguntar, porque os exemplos que encontro são um pouco complexos para mim.

Estou a carregar os dados usando php, ou seja, nunca tenho um número exacto de linhas. O que quero é que a paginação seja criada, de 10 em 10 elementos, imaginando que tenho 30 elementos.

8
  • Não creio que seja possível usando apenas javascript. A informação de quantas páginas tem precisa ser gerada de alguma forma, logo ou HTML tem que saber, ou PHP com Ajax para carregar as demais páginas Commented 20/02/2014 às 18:08
  • Com XmlHttpRequest? E porque motivo não seria possível ter o números de linhas só por causa do PHP?
    – luiscubal
    Commented 20/02/2014 às 18:08
  • sim, é possível saber o número de linhas por php. agora o resto é que é complicado..
    – pc_oc
    Commented 20/02/2014 às 18:15
  • Poderia especificar o que você quer? existem inúmeros meios de fazer uma paginação, depende muito do que você quer, por favor, especifique. Commented 20/02/2014 às 18:25
  • uma simples paginação, em que recebo n entradas, e quero fazer a paginação deles, por exemplo de 10 em 10 entradas
    – pc_oc
    Commented 20/02/2014 às 18:29

2 Respostas 2

15

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>&lsaquo; Anterior</button>
    <span id="numeracao"></span>
    <button id="proximo" disabled>Próximo &rsaquo;</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 e, como bônus, mostrar o número da página:

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[i][0]))
                .append($('<td>').append(dados[i][1]))
        )
    }
    $('#numeracao').text('Página ' + (pagina + 1) + ' de ' + Math.ceil(dados.length / tamanhoPagina));
}

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

4
  • e é possível com numeração em baixo?
    – pc_oc
    Commented 20/02/2014 às 22:13
  • @pc_oc Feito! É isso que você queria?
    – utluiz
    Commented 21/02/2014 às 12:17
  • sim sim, muito obrigado! agora só espero conseguir meter os valores recebidos da base de dados para dentro do array dados!
    – pc_oc
    Commented 21/02/2014 às 12:49
  • Que resposta top. Muito Obrigado.
    – Marconi
    Commented 15/03/2016 às 15:15
0

Você pode utilizar a Slickgrid para fazer isso. É bem simples. Neste exemplo tem visualmente a paginação, mas não está implementada. Mas como disse, é simples de fazer.

1
  • é possível estilizar a exibição com Bootstrap?
    – wilder
    Commented 25/05/2020 às 14:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .