Make current pagination button active - Jquery

SofiaLazrak
October 26, 2022
128 views
0 votes
2 Answers

I have a pagination. I need to style the current link in my pagination. For that I need to add a class "active" to the current link so that I can style it with css

Here is the javascript I have:

var itemsNumber = 6, $items, pages = 1, current = 1;
function makePages(){
    $items = $(".filtered-div:visible");
    pages = Math.ceil($items.length / itemsNumber);
    $("#pages").empty();
    for(var p=1;p<=pages;p++){
          $("#pages").append($('<a href="#">'+p+'</a>'));
    }
    showPage(1);
}
function showPage(page){
    $items.hide().slice((page - 1) * itemsNumber, page * itemsNumber).show();
    current = page;
$("div.ctrl-nav a").show();
    if(current == 1){
        $("div.ctrl-nav a:first").hide();
    }else if(current == pages){
        $("div.ctrl-nav a:last").hide();
    }
}
makePages();
$("div.ctrl-nav").on('click', 'a', function(){
    var action = $(this).text();
    if(action == 'Précédent'){
        current--;
    }else if(action == 'Suivant'){
        current++;
    }else if(+action > 0){
        current = +action;
    }
    if(current <= 1){
        current = 1;
    }else if(current >= pages){
        current = pages;
    }
    showPage(current);
 
});

And this is my HTML:

<div id="item-wrapper">
    <div class="filtered-div" data-tag="['category-1']">item 1</div>
    <div class="filtered-div" data-tag="['category-1']">item 2</div>
    <div class="filtered-div" data-tag="['category-2']">item 8</div>
    <div class="filtered-div" data-tag="['category-2']">item 9</div>
    <div class="filtered-div" data-tag="['category-2']">item 10</div>
    <div class="filtered-div" data-tag="['category-2']">item 11</div>
    <div class="filtered-div" data-tag="['category-2']">item 12</div>
   
    <div class="ctrl-nav">
        <a href="#">Précédent</a><span id="pages"></span><a href="#">Suivant</a>
    </div>
    </div>

Here is a codepen: Codepen

Any suggestions? Thanks for your help

Answers

- Fralle
- October 26, 2022 at 6:37 pm
- 0 votes
0
I’m not sure if I understand your question. You already solved the issue in your codepen example. The only thing left is adding CSS styling for the active class.
```
.btn.active {
  background: red;
}
```
Login or Signup to reply.

Your paging buttons are added in a div with id pages, so you can reference the current page with:

$("#pages a").eq(current - 1)

as your "page" (current) value is 1-based, but .eq is 0-based, it needs to be -1.

Taking the more-complete code from the codepen and adding active to the current page link gives:

var itemsNumber = 6,
  $items, pages = 1,
  current = 1;

function makePages() {
  $items = $(".filtered-div:visible");
  pages = Math.ceil($items.length / itemsNumber);
  $("#pages").empty();
  for (var p = 1; p <= pages; p++) {
    $("#pages").append($('<a href="#">' + p + '</a>'));
  }
  showPage(1);
}

function showPage(page) {
  $items.hide().slice((page - 1) * itemsNumber, page * itemsNumber).show();
  current = page;
  $("div.ctrl-nav a").show();
  if (current == 1) {
    $("div.ctrl-nav a:first").hide();
  } else if (current == pages) {
    $("div.ctrl-nav a:last").hide();
  } 
  $("div.ctrl-nav a.active").removeClass("active");
  $("#pages a").eq(current - 1).addClass("active"); 
}

makePages();

$("div.ctrl-nav").on('click', 'a', function() {
  var action = $(this).text();
  if (action == 'Précédent') {
    current--;
  } else if (action == 'Suivant') {
    current++;
  } else if (+action > 0) {
    current = +action;
  }
  if (current <= 1) {
    current = 1;
  } else if (current >= pages) {
    current = pages;
  }
  showPage(current);

});


var $myitems = $('.filtered-div');
$('.btn-container').on('click', '.btn', function() {
  var value = $(this).data('filter');
  if (value == "all") {
    $myitems.show();
  } else {
    var $selected = $myitems.filter(function() {
      return $(this).data('tag').indexOf(value) != -1;
    }).show();
    $myitems.not($selected).hide();
  }
  $(this).addClass('active').siblings().removeClass('active');
  makePages();
});

.ctrl-nav {
  width: calc(100% - 2rem);
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  padding: 1rem 0;
  justify-content: center;
}
.ctrl-nav a {
  text-decoration: none;
  font-size:16px;
  margin: 0 0.25rem;
  padding:5px 10px;
}
.ctrl-nav a.active{
  border-radius:8px;
  background-color: #0085b6;
  color: white;
}
.ctrl-nav a#prev{
 float:left; 
}
.ctrl-nav a#next{
 float:right;   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="btn-container">
   <button class="btn active" data-filter="all">Show  All</button>
   <button class="btn" data-filter="category-1">Category 1</button>
   <button class="btn" data-filter="category-2">Category 2</button>
</div>

<div id="item-wrapper">
    <div class="filtered-div" data-tag="['category-1']">item 1</div>
    <div class="filtered-div" data-tag="['category-1']">item 2</div>
    <div class="filtered-div" data-tag="['category-1']">item 3</div>
    <div class="filtered-div" data-tag="['category-1']">item 4</div>
    <div class="filtered-div" data-tag="['category-1']">item 5</div>
    <div class="filtered-div" data-tag="['category-1']">item 6</div>
    <div class="filtered-div" data-tag="['category-2']">item 7</div>
    <div class="filtered-div" data-tag="['category-2']">item 8</div>
    <div class="filtered-div" data-tag="['category-2']">item 9</div>
    <div class="filtered-div" data-tag="['category-2']">item 10</div>
    <div class="filtered-div" data-tag="['category-2']">item 11</div>
    <div class="filtered-div" data-tag="['category-2']">item 12</div>
    <div class="filtered-div" data-tag="['category-1']">item 13</div>
    <div class="filtered-div" data-tag="['category-1']">item 14</div>
    <div class="filtered-div" data-tag="['category-2']">item 15</div>


<div class="ctrl-nav">
<a href="#">Précédent</a><span id="pages"></span><a href="#">Suivant</a>
</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Make current pagination button active – Jquery

Answers