JS实现前端动态分页码代码实例
程序员文章站
2022-04-09 16:15:09
思路分析：有3种情况第一种情况，当前页面curpage < 4第二种情况，当前页面curpage == 4第三种情况，当前页面curpage>4此外，还要考虑，当前页码 curpage &...
思路分析：有3种情况
第一种情况，当前页面curpage < 4
第二种情况，当前页面curpage == 4
第三种情况，当前页面curpage>4
此外，还要考虑，当前页码 curpage < pagetotal（总页码）-2，才显示 ...
首先，先是前端的布局样式
<body> /*首先，在body中添加div id="pagination" */ <div id="pagination"> <!-- 后面会在js中动态追加 ，此处为了，实现前端效果，所以注册 <a id="prevbtn"><</a> <a id="first">1</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a> <span>...</span> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="last">10</a> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="nextbtn">></a> --> </div> </body>
其次，是css代码
*{
margin: 0;
padding: 0;
}
#pagination{
width: 500px;
height: 100px;
border: 2px solid crimson;
margin: 50px auto ;
padding-top: 50px ;
padding-left: 50px;
}
.over,.pageitem{
float: left;
display: block;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
}
.pageitem{
border: 1px solid orangered;
text-decoration: none;
color: dimgrey;
margin-right: -1px;/*解决边框加粗问题*/
}
.pageitem:hover{
background-color: #f98e4594;
color:orangered ;
}
.clearfix{
clear: both;
}
.active{
background-color: #f98e4594;
color:orangered ;
}
.banbtn{
border:1px solid #ff980069;
color: #ff980069;
}
#prevbtn{
margin-right: 10px;
}
#nextbtn{
margin-left: 10px;
}
javascript代码
<script type="text/javascript">
var pageoptions = {pagetotal:10,curpage:7,paginationid:''};
dynamicpagingfunc(pageoptions);
function dynamicpagingfunc(pageoptions){
var pagetotal = pageoptions.pagetotal || 1;
var curpage = pageoptions.curpage||1;
var doc = document;
var paginationid = doc.getelementbyid(''+pageoptions.paginationid+'') || doc.getelementbyid('pagination');
var html = '';
if(curpage>pagetotal){
curpage =1;
}
/*总页数小于5，全部显示*/
if(pagetotal<=5){
html = appenditem(pagetotal,curpage,html);
paginationid.innerhtml = html;
}
/*总页数大于5时，要分析当前页*/
if(pagetotal>5){
if(curpage<=4){
html = appenditem(pagetotal,curpage,html);
paginationid.innerhtml = html;
}else if(curpage>4){
html = appenditem(pagetotal,curpage,html);
paginationid.innerhtml = html;
}
}
}
function appenditem(pagetotal,curpage,html){
var starpage = 0;
var endpage = 0;
html+='<a id="prevbtn"><</a>';
if(pagetotal<=5){
starpage = 1;
endpage = pagetotal;
}else if(pagetotal>5 && curpage<=4){
starpage = 1;
endpage = 4;
if(curpage==4){
endpage = 5;
}
}else{
if(pagetotal==curpage){
starpage = curpage-3;
endpage = curpage;
}else{
starpage = curpage-2;
endpage = curpage+1;
}
html += '<a id="first">1</a><span>...</span>';
}
for(let i = starpage;i <= endpage;i++){
if(i==curpage){
html += '<a id="first">'+i+'</a>';
}else{
html += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+i+'</a>';
}
}
if(pagetotal<=5){
html+='<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="nextbtn">></a>';
}else{
if(curpage<pagetotal-2){
html += '<span>...</span>';
}
if(curpage<=pagetotal-2){
html += '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+pagetotal+'</a>';
}
html+='<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="nextbtn">></a>';
}
return html;
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。