Question

48

how to get my prev and next button work on pagination?

rated 0 times [ 55] [ 7] / answers: 1 / hits: 34156 / 9 Years ago, fri, july 17, 2015, 12:00:00

$(document).ready(function(){

      var $pageItem = $(.pagination li)



      $pageItem.click(function(){

        $pageItem.removeClass(active);

        $(this).addClass(active);

      });

    });

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css rel=stylesheet/>

<nav>

  <ul class=pagination>

    <li>

      <a href=# aria-label=Previous>

        <span aria-hidden=true>&laquo;</span>

      </a>

    </li>

    <li><a href=#>1</a></li>

    <li><a 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=# aria-label=Next>

        <span aria-hidden=true>&raquo;</span>

      </a>

    </li>

  </ul>

</nav>

Now, I am using bootstrap pagination and add some customise feature using jQuery to make page active when I click on it which mean current page.

However, the prev and next button will be also active.
What can I do to only switch page active when click on prev or next button and not to add active to prev and next button.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelyn

Add To Favorites

Follow

Total Points: 619

Total Questions: 102

Total Answers: 104

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

answered 9 Years ago tayla · Accepted Answer

Add a class to the previous and next buttons i.e. list items in your case and use .not() to exclude them.

$(document).ready(function() {

  var pageItem = $(.pagination li).not(.prev,.next);

  var prev = $(.pagination li.prev);

  var next = $(.pagination li.next);



  pageItem.click(function() {

    pageItem.removeClass(active);

    $(this).not(.prev,.next).addClass(active);

  });



  next.click(function() {

    $('li.active').removeClass('active').next().addClass('active');

  });



  prev.click(function() {

    $('li.active').removeClass('active').prev().addClass('active');

  });





});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css rel=stylesheet />

<nav>

  <ul class=pagination>

    <li class=prev>

      <a href=# aria-label=Previous>

        <span aria-hidden=true>&laquo;</span>

      </a>

    </li>

    <li><a href=#>1</a>

    </li>

    <li><a href=#>2</a>

    </li>

    <li><a href=#>3</a>

    </li>

    <li><a href=#>4</a>

    </li>

    <li><a href=#>5</a>

    </li>

    <li class=next>

      <a href=# aria-label=Next>

        <span aria-hidden=true>&raquo;</span>

      </a>

    </li>

  </ul>

</nav>