2

Estou tentando fazer uma paginação simples, apenas clicar no botão "2" por exemplo e ela acontecer. Tentei usar esse, mas não consegui:

https://esimakin.github.io/twbs-pagination/

Alguém poderia me ajudar com isso? Desde indicar um tutorial no Youtube, artigo, livro, ajuda pessoal, qualquer coisa.

Eu queria fazer sem usar php ou mysql e coisas do tipo, só com html, css e js.

Aqui está meu código, queria que ao clicar no 1, 2, 3 etc, só trocassem as informações da div acima, não queria ter que criar uma página "clone" e mudar apenas as informações.

Meu código:

https://pastebin.com/N7dPxR0H

1 Resposta 1

0

Você pode usar esse plugin citado "twbs-pagination" da seguinte forma:

Baixe o zip na página do plugin e carregue-o no seu projeto usando o arquivo jquery.twbsPagination.min.js:

<script src="jquery.twbsPagination.min.js"></script>

Adicionei as classes hide (nativa do Bootstrap, que oculta a div) e paginas (criada por mim para dar uma referência às divs que serão manipuladas, como se cada div com esta classe fosse uma página):

<div class="row hide paginas">
   <div class="col-md-2 data-evento">
      <div>

         <h1> DOMINGO  </h1>
         <h2> 12 NOV</h2>
         <h3> 22:00 </h3>

      </div>

   </div>
   <div class="col-md-10 desc-evento">

      <h1> Foo Fighters + Queens of the Stone Age</h1>
      <h3> São Paulo - SP</h3>
      <h4> Allianz Parque</h4>
      <button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>

   </div>
</div>

Em seguida, na última div, onde estarão os botões, adicionei a classe paginas-bts, para diferenciá-la das outras:

<div class="row paginas-bts">
   <div class="col-md-5">
   </div>

   <div class="col-md-5">
      <ul id="pagination">
      </ul>
   </div>
</div>

Para finalizar, basta chamar o plugin no jQuery após o carregamento da página (veja que criei algumas variáveis para contar o número de divs automaticamente):

$(window).on("load", function(){
    var pag_div = $("#conteudo .container div.paginas"); // seleciono as divs que serão paginadas, exceto a que contém os botões
    var num_div = pag_div.length; // conto o número de divs
   $('#pagination').twbsPagination({
     totalPages: num_div,
     visiblePages: 5,
     onPageClick: function (event, page) {
        pag_div.addClass("hide"); // escondo todas as divs
        pag_div.eq(page-1).removeClass("hide"); // mostro a div da página
     }
   });
});

Veja em ação:

$(window).on("load", function(){
    var pag_div = $("#conteudo .container div.paginas");
    var num_div = pag_div.length;
   $('#pagination').twbsPagination({
     totalPages: num_div,
     visiblePages: 5,
     onPageClick: function (event, page) {
        pag_div.addClass("hide");
        pag_div.eq(page-1).removeClass("hide");
     }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://esimakin.github.io/twbs-pagination/js/jquery.twbsPagination.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<section id="conteudo">
   <div class="container">

      <div class="row hide paginas">
         <div class="col-md-2 data-evento">
            <div>

               <h1> DOMINGO  </h1>
               <h2> 12 NOV</h2>
               <h3> 22:00 </h3>

            </div>

         </div>
         <div class="col-md-10 desc-evento">

            <h1> Foo Fighters + Queens of the Stone Age</h1>
            <h3> São Paulo - SP</h3>
            <h4> Allianz Parque</h4>
            <button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>

         </div>
      </div>

      <div class="row hide paginas">
         <div class="col-md-2 data-evento">
            <div>

               <h1> DOMINGO  </h1>
               <h2> 13 NOV</h2>
               <h3> 22:00 </h3>

            </div>

         </div>
         <div class="col-md-10 desc-evento">

            <h1> Foo Fighters + Queens of the Stone Age</h1>
            <h3> São Paulo - SP</h3>
            <h4> Allianz Parque</h4>
            <button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>

         </div>
      </div>

      <div class="row hide paginas">
         <div class="col-md-2 data-evento">
            <div>

               <h1> DOMINGO  </h1>
               <h2> 14 NOV</h2>
               <h3> 22:00 </h3>

            </div>

         </div>
         <div class="col-md-10 desc-evento">

            <h1> Foo Fighters + Queens of the Stone Age</h1>
            <h3> São Paulo - SP</h3>
            <h4> Allianz Parque</h4>
            <button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>

         </div>
      </div>

      <div class="row hide paginas">
         <div class="col-md-2 data-evento">
            <div>

               <h1> DOMINGO  </h1>
               <h2> 15 NOV</h2>
               <h3> 22:00 </h3>

            </div>

         </div>
         <div class="col-md-10 desc-evento">

            <h1> Foo Fighters + Queens of the Stone Age</h1>
            <h3> São Paulo - SP</h3>
            <h4> Allianz Parque</h4>
            <button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>

         </div>
      </div>

      <div class="row hide paginas">
         <div class="col-md-2 data-evento">
            <div>

               <h1> DOMINGO  </h1>
               <h2> 16 NOV</h2>
               <h3> 22:00 </h3>

            </div>

         </div>
         <div class="col-md-10 desc-evento">

            <h1> Foo Fighters + Queens of the Stone Age</h1>
            <h3> São Paulo - SP</h3>
            <h4> Allianz Parque</h4>
            <button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>

         </div>
      </div>

      <div class="row paginas-bts">
         <div class="col-md-5">
         </div>
   
         <div class="col-md-5">
            <ul id="pagination">
            </ul>
         </div>
      </div>
   </div>
<section>

8
  • Meu código está assim: pastebin.com/kUE99Gh9, mas está tudo branco, a única coisa eu aparece são os números da pagination. O que eu fiz de errado? E já agradeço pela ajuda
    – Kali
    Commented 13/11/2017 às 11:00
  • @Kali Fiz uma alteração no jQuery da resposta, substitua para testar. Agora, olhando o seu código, o correto é chamar primeiro a biblioteca jQuery e depois as demais.
    – Sam
    Commented 13/11/2017 às 15:27
  • @ÐvÐ estou observando seu exemplo, e queria perguntar... Eu conseguiria paginar resultados dentro de uma janela modal com este código
    – Victor
    Commented 13/11/2017 às 15:29
  • @Kali Observe no meu código que na UL pagination você não precisa colocar os links com os botões, o plugin já coloca. Tem que deixar essa UL vazia.
    – Sam
    Commented 13/11/2017 às 15:44
  • Ótimo!!! Agora está funcionando, agradeço imensamente! Só mais uma pergunta, tem como eu mostrar mais de uma DIV? No momento aparece apenas uma, tem como aumentar esse numero para 5 ou 6 por exemplo?
    – Kali
    Commented 13/11/2017 às 16:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .