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>
<span id="numeracao"></span>
<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 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();
});
XmlHttpRequest
? E porque motivo não seria possível ter o números de linhas só por causa do PHP?