Simple paging in jQuery/Javascript

Question

I’m looking for a simple pagination, no CSS styles, nothing like that. Only with the buttons below to change page and with the elements on top. I’m asking because the examples I find are a little complex for me.

I am loading the data using php, IE, 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 1

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>&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 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();
});

Functional example in jsfiddle

Answer 2

You can use the Slickgrid to do this. It is quite simple. In this example has visually pagination but is not implemented. But as I said, it is simple to do.