Simple paging in jQuery/Javascript

Question:

I'm looking for simple pagination, no CSS styles or anything like that. Only with the buttons at the bottom to change the page and with the elements at the top. I'm asking because the examples I find are a little complex for me.

I'm loading the data using php, meaning I never have an exact number of lines. What I want is for the pagination to be created, every 10 elements, imagining that I have 30 elements.

Answer:

One way to do 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 vector (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']
];

So 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>&lsaquo; Anterior</button>
    <span id="numeracao"></span>
    <button id="proximo" disabled>Próximo &rsaquo;</button>
</div>

Then you will need some fixed elements in the Javascript code to determine the size of the data page and what the current page is:

var tamanhoPagina = 6;
var pagina = 0;

It is also necessary to have a function to fill in 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 to have a function to activate or deactivate the Próximo and Anterior buttons when you are on the last or first page, respectively. You could also disable it if you only had 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 forward and backward event on the pages, as well as initialize it all on loading the HTML page:

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

Working example in jsfiddle

Scroll to Top