title: Limit Pagination Numbers
body: <p>I've got a pagination up and running which works fine. However I would like it to only display 5 page numbers at for example 1.2.3.4.5 then when I click next it goes 6.7.8.9.10 and so on. </p>
  
  <p>I've created it using JavaScript and the code is below. </p>
  
  <p>I have tried multiple pieces of code from various places but i'm positive i'm missing something as nothing seems to work. </p>
  
  <pre><code>$( document ).ready(function() {  
  
      pageSize = 2;
      pagesCount = $(".content").length;
      var currentPage = 1;
  
      /////////// PREPARE NAV ///////////////
      var nav = '';
      var totalPages = Math.ceil(pagesCount / pageSize);
      for (var s=0; s&lt;totalPages; s++){
          nav += '&lt;li class="numeros"&gt;&lt;a href="#"&gt;'+(s+1)+'&lt;/a&gt;&lt;/li&gt;';
      }
      $(".pag_prev").after(nav);
      $(".numeros").first().addClass("active");
      //////////////////////////////////////
  
      showPage = function() {
          $(".content").hide().each(function(n) {
              if (n &gt;= pageSize * (currentPage - 1) &amp;&amp; n &lt; pageSize * currentPage)
                  $(this).show();
          });
      }
      showPage();
  
  
      $(".pagination li.numeros").click(function() {
          $(".pagination li").removeClass("active");
          $(this).addClass("active");
          currentPage = parseInt($(this).text());
          showPage();
      });
  
      $(".pagination li.pag_prev").click(function() {
          if($(this).next().is('.active')) return;
          $('.numeros.active').removeClass('active').prev().addClass('active');
          currentPage = currentPage &gt; 1 ? (currentPage-1) : 1;
          showPage();
      });
  
      $(".pagination li.pag_next").click(function() {
          if($(this).prev().is('.active')) return;
          $('.numeros.active').removeClass('active').next().addClass('active');
          currentPage = currentPage &lt; totalPages ? (currentPage+1) : totalPages;
          showPage();
      });
  });
  </code></pre>