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

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

• javascript
• pagination

Share Improve this question Follow edited Jul 4, 2017 at 12:42 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jul 4, 2017 at 12:39 user7804189user7804189 2

• 1 Wele to StackOverflow! Please provide us some more information on what exactly does not work with your code and what exactly you wanted to achieve with it so we can provide you some help. Please also see stackoverflow./help/how-to-ask – Tom Doodler Commented Jul 4, 2017 at 12:41
• Hi, Currently at the moment every time I add new content the pagination adds another number. So at the minute I currently have numbers 1-10 listed along the bottom of the page. However I would like it so it only displays around 5 numbers until I get to the last one then it changes to another 5 numbers – user7804189 Commented Jul 4, 2017 at 12:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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./bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>