Algumas vezes, vamos deparar com uma situação onde é preciso fazer uma paginação sem a ajuda de uma linguagem de backend. É exatamente isso que vou ensinar aqui: fazer um sistema de paginação utilizando JavaScript , jQuery e Bootstrap.
Vamos primeiramente criar a nossa estrutura HTML e chamar as bibliotecas:
<!DOCTYPE html> <html> <head> <script src="/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet"href="/css/bootstrap.min.css"> // somente para ficar mais "bonito o layout" vamos dar um padding-bottom no select <style type="text/css"> .col-lg-12{ padding-bottom: 20px; } </style> </head> <body> <div class="col-lg-12"> <p>itens por pagina</p> <select id="qtd" class="form-control input-sm input-order"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="all" id="conteudo"> <div class="col-lg-3 col-md-6"> <div class="panel panel-primary "> <p>Tabless 1</p> </div> </div> <div class="col-lg-3 col-md-6"> <div class="panel panel-primary "> <p>Tabless 2</p> </div> </div> <div class="col-lg-3 col-md-6"> <div class="panel panel-primary "> <p>Tabless 3</p> </div> </div> </div> <div id="pagi"></div> //div responsável por mostrar a paginação </body> </html>
Reparem que eu escrevi 3 vezes a mesma div. Vocês podem repetir quantas vezes quiserem ou até coloca-lá em loop (foreach do PHP, por exemplo). É exatamente essa repetição que vamos paginar. Vamos agora criar as funções em JavaScript:
<script type="text/javascript"> //acionamos o jquery para iniciar a paginação quando o documento estiver "pronto" $(document).ready(function() { //Pegamos o valor selecionado default no select id="qtd" var mostrar_por_pagina = $('#qtd').val(); //quantidade de divs var numero_de_itens = $('#conteudo').children('.col-lg-3').size(); //fazemos uma calculo simples para saber quantas paginas existiram var numero_de_paginas = Math.ceil(numero_de_itens / mostrar_por_pagina) //Colocamos a div class controls dentro da div id pagi $('#pagi').append('<div class=controls></div> <input id=current_page type=hidden><input id=mostrar_por_pagina type=hidden>'); $('#current_page').val(0); $('#mostrar_por_pagina').val(mostrar_por_pagina); //Criamos os links de navegação var nevagacao = '<li><a class="prev" onclick="anterior()">Prev</a></li>'; var link_atual = 0; while (numero_de_paginas > link_atual) { nevagacao += '<li><a class="page" onclick="ir_para_pagina(' + link_atual + ')" longdesc="' + link_atual + '">' + (link_atual + 1) + '</a></li>'; link_atual++; } nevagacao += '<li><a class="proxima" onclick="proxima()">proxima</a></li>'; //colocamos a nevegação dentro da div class controls $('.controls').html("<div class='paginacao'>\ <ul class='pagination pagination-sm'>"+nevagacao+"</ul></div>"); //atribuimos ao primeiro link a class active $('.controls .page:first').addClass('active'); $('#conteudo').children().css('display', 'none'); $('#conteudo').children().slice(0, mostrar_por_pagina).css('display', 'block'); }); </script>
Até aqui, a paginação já é mostrada, porém, ao clicar nos links, nada acontece. Vamos criar as seguintes funções em JavaScript para que funcione: ir_para_pagina(), _anterior()_ e proxima().
Então mãos à obra:
<script type="text/javascript"> function ir_para_pagina(numero_da_pagina) { //Pegamos o número de itens definidos que seria exibido por página var mostrar_por_pagina = parseInt($('#mostrar_por_pagina').val(), 0); //pegamos o número de elementos por onde começar a fatia inicia = numero_da_pagina * mostrar_por_pagina; //o número do elemento onde terminar a fatia end_on = inicia + mostrar_por_pagina; $('#conteudo').children().css('display', 'none').slice(inicia, end_on).css('display', 'block'); $('.page[longdesc=' + numero_da_pagina+ ']').addClass('active') .siblings('.active').removeClass('active'); $('#current_page').val(numero_da_pagina); } function anterior() { nova_pagina = parseInt($('#current_page').val(), 0) - 1; //se houver um item antes do link ativo atual executar a função if ($('.active').prev('.page').length == true) { ir_para_pagina(nova_pagina); } } function proxima() { nova_pagina = parseInt($('#current_page').val(), 0) + 1; //se houver um item após o link ativo atual executar a função if ($('.active').next('.page').length == true) { ir_para_pagina(nova_pagina); } } </script>
Pronto, agora temos um sistema de paginação baseado em div’s com JavaScript + jQuery, porém, precisamos pegar a quantidade de itens por página que o usuário escolher e remontar toda a paginação. Para isso, vamos usar a função change do jQuery:
<script type="text/javascript"> // Pegamos o evento change do select id="qtd" e remontamos toda a paginação default $( "#qtd" ).change(function() { //Removemos os "controles" de paginação $(".controls").remove(); //Pegamos o valor selecionado var mostrar_por_pagina = this.value; //remontamos a paginação var numero_de_itens = $('#conteudo').children('.col-lg-3').size(); var numero_de_paginas = Math.ceil(numero_de_itens / mostrar_por_pagina); //Colocamos a div class controls dentro da div id pagi $('#pagi').append('<div class=controls></div> <input id=current_page type=hidden><input id=mostrar_por_pagina type=hidden>'); $('#current_page').val(0); $('#mostrar_por_pagina').val(mostrar_por_pagina); //Criamos os links de navegação var nevagacao = '<li><a class="prev" onclick="previous()">Prev</a></li>'; var link_atual = 0; while (numero_de_paginas > link_atual) { nevagacao += '<li><a class="page" onclick="ir_para_pagina(' + link_atual + ')" longdesc="' + link_atual + '">' + (link_atual + 1) + '</a></li>'; link_atual++; } nevagacao += '<li><a class="next" onclick="next()">Next</a></li>'; //colocamos a navegação dentro da div class controls $('.controls').html("<div class='paginacao'> <ul class='pagination pagination-sm'>"+nevagacao+"</ul></div>"); $('.controls .page:first').addClass('active'); $('#conteudo').children().css('display', 'none'); $('#conteudo').children().slice(0, mostrar_por_pagina).css('display', 'block'); }); </script>
Nosso sistema de paginação completo, totalmente no HTML, é uma das vantagens dessa paginação. O ganho de performance, claro, depende da quantidade de dados.
Adaptado de https://web.enavu.com/tutorials/making-a-jquery-pagination-system/