title: How do I program bootstrap-3 pagination to work with simple HTML content
body: <p>I'm working in a "News" Section, and trying to make a bootstrap 3 pagination work with jquery.</p>
  
  <p>HTML for the pagination:</p>
  
  <pre><code>&lt;nav class="text-center"&gt;
      &lt;ul class="pagination"&gt;
          &lt;li class="pag_prev"&gt;
              &lt;a href="#" aria-label="Previous"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="pag_1"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
          &lt;li class="pag_next"&gt;
              &lt;a href="#" aria-label="Next"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
  
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$( document ).ready(function() { 
      $("#pag_1").addClass("active");
  });
  
  pageSize = 1;
  var i = 1;
  
  showPage = function(page) {
      $(".content").hide();
      $(".content").each(function(n) {
          if (n &gt;= pageSize * (page - 1) &amp;&amp; n &lt; pageSize * page)
              $(this).show();
      });
  }
  
  showPage(i);
  
  
  $("#pagin li.numeros").click(function() {
      $("#pagin li").removeClass("active");
      $(this).addClass("active");
      i = parseInt($(this).text());
      showPage(i);
  });
  
  $("#pagin li.pag_prev").click(function() {
      $("#pagin li").removeClass("active");
      $(this).addClass("active");
      i = i - 1;
      showPage(i);
  });
  
  $("#pagin li.pag_next").click(function() {
      $("#pagin li").removeClass("active");
      $(this).addClass("active");
      i = i + 1;
      showPage(i);
  });
  </code></pre>
  
  <p>I have 5 news for now, so I set the news per page in 1 (<code>pageSize = 1;</code>) so I can have 5 pages to navigate and make sure its working.</p>
  
  <p>My issues are:</p>
  
  <ol>
  <li>When I navigate the pages with the arrows (not the numbers), the numbers don't get the <code>active</code> class, and I couldnt figurate how to make it.</li>
  <li>Im showing 5 pages, but you can navigate to infinite foward and backward, I don't know how to tell to stop when reach the last and the first page.</li>
  <li>Is there a way to automatic generate a new <code>&lt;li class="numeros"&gt;&lt;a href="#"&gt;Nº&lt;/a&gt;&lt;/li&gt;</code> and the respective page with JS when the page reach the amount of news setting (e.x. <code>pageSize = 5</code>)?</li>
  </ol>