您的位置：首页 > Web前端 > BootStrap

【练习】基于Bootstrap点击分页

2020-05-21 16:07 197 查看

脑子不是很好使，钻研了一天鼓捣出来傻瓜式写法，记录以下自己的代码，应该没有什么参考意义

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Document</title>
</head>
<body>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="Previous">
<a aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>

<li class="Next">
<a aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
</body>
<script src="jquery-3.4.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
var thispages=0; thispage=1;pages=10;page=0;pagehtml='';hidepagehtml='<li class="pagehide disabled"><a>...</a></li>';
while(page<pages){
page++;
pagehtml+='<li class="page"><a>'+page+'</a></li>';
}
$('.Previous').after(pagehtml)
$('.pagination li.page').eq(0).addClass('active');
//识别上一页下一页状态
function getupdown(){
if(thispage==1){
$('.Previous').addClass('disabled');
}else{
$('.Previous').removeClass('disabled');
}

if(thispage==pages){               //pages=总页数；
$('.Next').addClass('disabled');
}else{
$('.Next').removeClass('disabled');
}
}

//点击切换
$('.pagination li.page').click(function(){
$(this).addClass('cur').siblings('li').removeClass('cur');
thispage=$('.cur a').text();

getpage();
getupdown();
hidepages();
});
getupdown();

//识别切换
function getpage(){
thispages=thispage-1;
$('.pagination li.page').eq(thispages).addClass('active').siblings('li').removeClass('active')
}

//点击下一页
$('.Next').click(function(){
if(thispage!=pages){
thispage++;
}
getupdown();
getpage();
hidepages();
});

//点击上一页
$('.Previous').click(function(){
if(thispage!=1){
thispage--;
}
getupdown();
getpage();
hidepages();
});

//页码隐藏算法
function hidepages(){
$('.active').prevAll().show();
$('.active').nextAll().show();
$('.pagehide').remove();
if((thispages-1)>=3){

if((pages-thispage-1)<3){
$('.active').prev().prev().prev().prev().prevAll().hide();
$('.Previous').show();
$('.pagination li').eq(1).show();
$('.active').prev().prev().prev().prev().before(hidepagehtml);
}else{
$('.active').prev().prev().prevAll().hide();
$('.Previous').show();
$('.pagination li').eq(1).show();
$('.active').prev().prev().before(hidepagehtml);
}
};
if((pages-thispage-1)>=3){
if(thispage<3){
$('.active').next().next().next().next().nextAll().hide();
$('.Next').show();
$('.pagination li').eq(-2).show();
$('.active').next().next().next().next().after(hidepagehtml);
}else{
$('.active').next().next().nextAll().hide();
$('.Next').show();
$('.pagination li').eq(-2).show();
$('.active').next().next().after(hidepagehtml);
};
getpage();
}
}
hidepages();

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航