Pagination script style current page number after click on next/ previous buttons

user_15885108 0
Viewed 862

I am working on a pagination script (code below); and I don't know how to select the current pagination number after clicking on the next previous buttons (I have added a comment to the missing bit below: removeClass('current'); and addClass('current') to active pagination number; ). The style should work the same as directly clicking on the page number $("#pagin li a").click(function()...

here is a picture:

pagination style when current page selected

Thank you in advance for your help!


pageSize = 4;
incremSlide = 5;
startPage = 0;
numberPage = 0;

var pageCount =  $(".browsethearchive-items").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
    
for(var i = 0 ; i<pageCount;i++){
    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    if(i>pageSize){
       $("#pagin li").eq(i).hide();
    }
}

var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
   startPage-=1;
   incremSlide-=1;
   numberPage--;
   slide();
});

prev.hide();

var next = $("<li/>").addClass("next").html("Next").click(function(){
   startPage+=1;
   incremSlide+=1;
   numberPage++;
   slide();
});


$("#pagin").prepend(prev).append(next);

$("#pagin li").first().find("a").addClass("current");

slide = function(sens){
   $("#pagin li").hide();
   
   for(t=startPage;t<incremSlide;t++){
     $("#pagin li").eq(t+1).show();
   }
   if(startPage == 0){
     next.show();
     prev.hide();
   }else if(numberPage == totalSlidepPage ){
     next.hide();
     prev.show();
   }else{
     next.show();
     prev.show();
   }
   
    
}

showPage = function(page) {
      $(".browsethearchive-items").hide();
      $(".browsethearchive-items").each(function(n) {
          if (n >= pageSize * (page - 1) && n < pageSize * page)
              $(this).show();
      });        
}
    
showPage(1);
$("#pagin li a").eq(0).addClass("current");


var $listItems = $('#pagin li a');
var activeLink;


$("#pagin li a").click(function() {

    $listItems.removeClass('current');
    $(this).addClass('current');  
    var activeLink=$(this);

    showPage(parseInt($(this).text()));
});


var i = 1;

$(".prev").click(function() {

    // removeClass('current');
    // addClass('current') to active pagination number; 

    if (i != 1) {
      showPage(--i);
    }
});
$(".next").click(function() {

    // removeClass('current');
    // addClass('current') to active pagination number; 


    if (i < ($('.browsethearchive-items').length)/4) {
      showPage(++i);
    }    
});

UPDATE here is a fiddle with the working code — > https://jsfiddle.net/JoChicau/em19ku8v/39/ — > thanks to @biberman!

css html jquery javascript
2 Answers

You can select the list element with the class "current" in this way:

$("#pagin li a.current")

For setting the class "current" to the next or previous list element you can use the jQuery methods next() and prev(). Since you set the class to the anchor inside the list element you first have to select the parent of the anchor with the parent() function to get the list element itself and after using next() or prev() select the anchor inside the new list element with find("a").

Working example:

$(".prev").click(function() {
  let prevLi = $("#pagin li a.current").parent().prev().find("a");
  if (prevLi[0]) {
    $("#pagin li a.current").removeClass("current");
    prevLi.addClass("current");
  }
});

$(".next").click(function() {
  let nextLi = $("#pagin li a.current").parent().next().find("a");
  if (nextLi[0]) {
    $("#pagin li a.current").removeClass("current");
    nextLi.addClass("current");
  }
});
ul {
  list-style: none;
}

li {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
}

li:not(.next, .prev) {
  background-color: grey;
}

li a.current {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="pagin">
    <li class="prev"><</li>
    <li><a class="current">1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
    <li><a>5</a></li>
    <li class="next">></li>
</ul>

Additionally i would recommend to add and remove the classes directly to/from the li tag because it makes the script a bit easier (for example no need for parent() and find("a")).

Working example:

$(".prev").click(function() {
    let prevLi = $("#pagin li.current").prev();
    if (prevLi.find('a')[0]) {
        $("#pagin li.current").removeClass("current");
        prevLi.addClass("current");
    }
});

$(".next").click(function() {
    let nextLi = $("#pagin li.current").next();
    if (nextLi.find('a')[0]) {
        $("#pagin li.current").removeClass("current");
        nextLi.addClass("current");  
    }
});
ul {
    list-style: none;
}

li {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
}

li:not(.next, .prev) {
    background-color: grey;
}

li.current {
    background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="pagin">
    <li class="prev"><</li>
    <li class="current"><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
    <li><a>5</a></li>
    <li class="next">></li>
</ul>

user_153773550

Warning: below code is untested.

Set an id containing the page number on every <a> representing a page. For instance

$("#pagin").append(`<li><a href="#" id="page-${i}">${i+1}</a></li> `);

Then use this id to target the right <a>

$(".prev").click(function() {
    if (i != 1) {
        i--;
        $listItems.removeClass('current');
        $(`#pagin li a#page-${i}`).addClass('current');

        showPage(i);
    }
});
user_34109890
Related