Tableless

Busca Menu

Paginação com JavaScript e jQuery

Seja o primeiro a comentar por

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 http://web.enavu.com/tutorials/making-a-jquery-pagination-system/

Publicado no dia