One way to make pagination exclusively with jQuery/Javascript is to have the data in a Javascript array and then apply it to a table with a specific function.
For example, you can use PHP to generate the following array (or return it in JSON format in an Ajax call):
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']
];
Then imagine a basic HTML containing an empty table and the forward and backward buttons, as follows:
<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>
Then you will need some fixed elements in the Javascript code to determine the size of the data page and what is the current page:
var tamanhoPagina = 6;
var pagina = 0;
It is also necessary to have a function to fill the data of the current page in the table and, as a bonus, show the page number:
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));
}
It would be interesting a function to activate or deactivate the buttons Próximo
and Anterior
when you were on the last or first page, respectively. You could also disable if you had only one page:
function ajustarBotoes() {
$('#proximo').prop('disabled', dados.length <= tamanhoPagina || pagina > dados.length / tamanhoPagina - 1);
$('#anterior').prop('disabled', dados.length <= tamanhoPagina || pagina == 0);
}
Finally, we need to put the event to move forward and backward on the pages, in addition to initializing all this on the HTML page upload:
$(function() {
$('#proximo').click(function() {
if (pagina < dados.length / tamanhoPagina - 1) {
pagina++;
paginar();
ajustarBotoes();
}
});
$('#anterior').click(function() {
if (pagina > 0) {
pagina--;
paginar();
ajustarBotoes();
}
});
paginar();
ajustarBotoes();
});
I don’t think it’s possible using javascript only. The information of how many pages you have needs to be generated in some way, logo or HTML you have to know, or PHP with Ajax to load the other pages
– Emerson Rocha
With
XmlHttpRequest
? And why it would not be possible to have line numbers just because of PHP?– luiscubal
yes, it is possible to know the number of lines per php. now the rest is complicated..
– pc_oc
Could you specify what you want? there are numerous ways to make a pagination, it depends a lot on what you want, please specify.
– Paulo Roberto Rosa
a simple pagination, where I receive n entries, and I want to paginate them, for example from 10 in 10 entries
– pc_oc
the basics for Pages is to perform a COUNT query to the unfiltered pagination data, to know the number of total records (thus the number of pages), and another query to the pagination filters (Qtd of items per page, "offset": from which index) to return only the data from the current page
– Andre Figueiredo
Have tried datatables.net ?
– user21407
@groo I never tried, advises to use?
– pc_oc