Make current pagination button active-CodePudding

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  data-tag="['category-1']">item 1</div>
    <div  data-tag="['category-1']">item 2</div>
    <div  data-tag="['category-2']">item 8</div>
    <div  data-tag="['category-2']">item 9</div>
    <div  data-tag="['category-2']">item 10</div>
    <div  data-tag="['category-2']">item 11</div>
    <div  data-tag="['category-2']">item 12</div>
   
    <div >
        <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

CodePudding user response：

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 >
   <button  data-filter="all">Show  All</button>
   <button  data-filter="category-1">Category 1</button>
   <button  data-filter="category-2">Category 2</button>
</div>

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


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

CodePudding user response：

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