引导分页下一个上一个不起作用

Bootstrap Pagination next previous not work

本文关键字：上一个 不起作用 下一个 分页      更新时间：2023-12-24
$(document).ready(function (){
  var defaultcount=7;
  $(".pagination").append("<li class='page-item mainactive mynxt'><a class='page-link' href='#' aria-label='Previous'><span aria-hidden='true'>&laquo;</span><span class='sr-only'>Previous</span></a></li>")
  for(dc=1;dc<=defaultcount;dc++)
  {
    if(dc==1){
      $(".pagination").append("<li id='idactive"+dc+"' class='active mainactive'><a href=#>"+dc+"</a></li>");
    }
    else{
      $(".pagination").append("<li id='idactive"+dc+"' class='mainactive'><a href=#>"+dc+"</a></li>");
    }
  }
  $(".pagination").append("<li class='page-item mainactive' id='mynext'><a class='page-link' href='#' aria-label='Next'><span aria-hidden='true'>&raquo;</span><span class='sr-only'>Next</span></a></li>")
});

分页功能

$(document).on("click",'.pagination li',function(){
  $(".mainactive").removeClass('active');
  $(this).addClass('active');
  console.log($(this).attr('id'));
  pagenumber=$(this).text();
  console.log("The button number is-->"+$(this).text());
});


$(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>

}(;

相关文章：