Paging without php and mysql

Asked

Viewed 377 times

2

I’m trying to make a simple pagination, just click on the "2" button for example and it happens. I tried to use this, but I couldn’t:

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

Could anyone help me with this? From indicating a tutorial on Youtube, article, book, personal help, anything.

I wanted to do without using php or mysql and things like that, only with html, css and js.

Here is my code, I wanted to click on 1, 2, 3 etc div above, did not want to have to create a "clone" page and change only the information.

My code:

https://pastebin.com/N7dPxR0H

javascript jquery html css bootstrap

1 answer

0


You can use this plugin cited "twbs-pagination" as follows:

Download the zip to the plugin page and load it into your project using the file jquery.twbsPagination.min.js:

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

I added the classes hide (Bootstrap native, which hides the div) and paginas (created by me to give a reference to divs that will be manipulated, as if each div with this class was a page):

<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>

Then on the last div, where the buttons will be, I added the class paginas-bts, to differentiate it from the others:

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

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

To finish, just call the plugin in jQuery after loading the page (see that I created some variables to count the number of divs automatically):

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

See in action:

$(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>

  • My code looks like this: https://pastebin.com/kUE99Gh9, but it’s all white, the only thing I show are the pagination numbers. What did I do wrong? And thanks for your help

  • @Kali I made a change in the answer jQuery, replace to test. Now, looking at your code, the correct thing is to call first the jQuery library and then the others.

  • @I’m watching your example, and I wanted to ask... I could paginate results inside a modal window with this code

  • @Kali Note in my code that in UL pagination you do not need to put the links with the buttons, the plugin already puts. You have to leave this UL empty.

  • Great!!! Now it’s working, I really appreciate it! Just one more question, can I show more than one DIV? At the moment appears only one, has to increase this number to 5 or 6 for example?

  • @Kali Each div with the class "Hide pages" is like a page. If you want to show more items per page, just put the most Divs inside.

  • Thank you very much!!!

  • Let me ask you, I know it’s been a while since you answered...but you know at the pagination, the names? Is there any way to change the next, last, Previous etc to "next, previous? Is there any way to change the name of these things? I don’t know how to do this by moving js, I just managed to modify things via css, like color

Show 3 more comments

Browser other questions tagged javascript jquery html css bootstrap

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