Simple paging in jQuery/Javascript


Viewed 29,551 times


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.

  • 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

  • With XmlHttpRequest? And why it would not be possible to have line numbers just because of PHP?

  • yes, it is possible to know the number of lines per php. now the rest is complicated..

  • Could you specify what you want? there are numerous ways to make a pagination, it depends a lot on what you want, please specify.

  • a simple pagination, where I receive n entries, and I want to paginate them, for example from 10 in 10 entries

  • 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

  • Have tried ?

  • @groo I never tried, advises to use?

Show 3 more comments

2 answers


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:

            <td colspan="2" align="center">Nenhum dado ainda...</td>
    <button id="anterior" disabled>&lsaquo; Anterior</button>
    <span id="numeracao"></span>
    <button id="proximo" disabled>Próximo &rsaquo;</button>

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++) {
    $('#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) {
    $('#anterior').click(function() {
        if (pagina > 0) {

Functional example in jsfiddle

  • and is possible with numeration below?

  • @pc_oc Done! That’s what you wanted?

  • yes, thank you very much! now I just hope to be able to enter the values received from the database into the data array!

  • What a top response. Thank you very much.


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.

  • you can style the display with Bootstrap?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.