[英]Bootstrap Pagination next previous not work
$(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'>«</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'>»</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">«</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">»</span> </a> </li> </ul> </nav>
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.