Shirish Shirish - 1 month ago 5
Javascript Question

How to apply class dynamically while doing custom pagination?

I have a custom pagination on my screen.
Now the issue is while i do my pagination


  1. how do i apply the
    active
    class
    on moving forward and backward using pagination.

  2. How do i apply
    active
    class
    when i click on the number.



I tried with javascript but it creates conflicts as there are many same values on the page. Also if i have to add extra
li
on click of next like 8 after 7, is it possible to do it in same function?

Please find my working code for pagination:

CSS:

/*Pagination CSS*/

ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

div.center {text-align: center;}

/*Pagination CSS Ends here*/


HTML:

<div class="center">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a id="test1" href="#">1</a></li>
<li><a id="test2" class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#" onclick="test()">»</a></li>
</ul>
</div>


Javascript:

function test() {
alert($('#myForm').find("input[value='" + 1 + "']").attr('id'));
document.getElementById("test2").className = "";
document.getElementById("test1").className = "active";
alert("test1");
}

Answer

I provide complete example, with preventing for arrows (prev, next) select

$('ul.pagination').on('click', 'a', function() { // listen for click on pagination link
    if($(this).hasClass('active')) return false;
  
    var active_elm = $('ul.pagination a.active');
  
    if(this.id == 'next'){
      var _next = active_elm.parent().next().children('a');
      if($(_next).attr('id') == 'next') {
        
        // appending next button if reach end
        var num = parseInt($('a.active').text())+1;
        active_elm.removeClass('active');
        $('<li><a class="active" href="#">'+num+'</a></li>').insertBefore($('#next').parent());
        return; 
      }
      _next.addClass('active');   
      
      
      
      
    }
    else if(this.id == 'prev') {
      var _prev = active_elm.parent().prev().children('a');
      if($(_prev).attr('id') == 'prev') return false;
      _prev.addClass('active');   
    } else {
      $(this).addClass('active');
    }
    active_elm.removeClass('active');
    
});
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

div.center {text-align: center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
  <ul class="pagination">
    <li><a id="prev">«</a></li>
    <li><a id="test1" href="#">1</a></li>
    <li><a id="test2" class="active" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#" id="next">»</a></li>
  </ul>
</div>