Limit Pagination Numbers

Question

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.

I've created it using JavaScript and the code is below.

I have tried multiple pieces of code from various places but i'm positive i'm missing something as nothing seems to work.

$( 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<totalPages; s++){
        nav += '<li class="numeros"><a href="#">'+(s+1)+'</a></li>';
    }
    $(".pag_prev").after(nav);
    $(".numeros").first().addClass("active");
    //////////////////////////////////////

    showPage = function() {
        $(".content").hide().each(function(n) {
            if (n >= pageSize * (currentPage - 1) && n < 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 > 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 < totalPages ? (currentPage+1) : totalPages;
        showPage();
    });
});

Answer 1

The first part of your question is easy

However I would like it to only display 5 page numbers

for (var s=0; s<Math.min(totalPages,5); s++) {
  nav += '<li class="numeros"><a href="#">'+ (s + 1) + '</a></li>';
}

This limits the number of page numbers displayed to totalPages or 5 whichever is smaller. For the second part of your question - seeing as you found a lugin which does exactly what you want there's not much point trying to replicate the behaviour. You're better off just using it directly. The appropriate code would be along the lines of:

pageSize = 2;
pagesCount = $(".content").length;
var totalPages = Math.ceil(pagesCount / pageSize)

$('.pagination').twbsPagination({
  totalPages: totalPages,
  visiblePages: 5,
  onPageClick: function(event, page) {
    var startIndex = (pageSize * (page - 1))
    var endIndex = startIndex + pageSize
    $('.content').hide().filter(function() {
      var idx = $(this).index();
      return idx >= startIndex && idx < endIndex;
    }).show()
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.js"></script>

<div class="contents text-center">
  <div class="content">
    <h1>NEWS 1</h1>
    <h3>Page 1 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 2</h1>
    <h3>Page 2 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 3</h1>
    <h3>Page 3 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 4</h1>
    <h3>Page 4 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 5</h1>
    <h3>Page 5 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 6</h1>
    <h3>Page 6 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 7</h1>
    <h3>Page 7 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 8</h1>
    <h3>Page 8 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 9</h1>
    <h3>Page 9 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 10</h1>
    <h3>Page 10 contents...</h3>
  </div>
  <div class="content">
    <h1>NEWS 11</h1>
    <h3>Page 11 contents...</h3>
  </div>
</div>

<nav class="text-center">
  <ul class="pagination">
  </ul>
</nav>