js分页
原创
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="pg">Hello World!</div>
</body>
</html>
<script>
//url连接，countdatas表数据总行数，currentpage第几页（0是第一页），everpage每页多少行,beforlaterln前后长度
function pagestr(url,countdatas,currentpage,everpage,beforlaterln){
var page= "";
var intpart = Math.floor(countdatas/everpage);//整数
var remainderpart = countdatas%everpage;//余数
var countpage = intpart;//取整数
var currentpage = currentpage<0 ? 0:currentpage;
if(remainderpart==0){//余数判断
currentpage=currentpage>countpage-1?countpage-1:currentpage;
var pp=currentpage+1;
var strbe="";
var pagebefore=pp-beforlaterln-1;
for(var i=pp; i > pagebefore; i--){
if(i>0 && i<pp){
strbe="<a class='num' href='"+url+"&p="+(i-1)+"'>"+i+"</a>"+strbe;
}
}
if(pp<=1){strbe="";}else{strbe="<a class='num' href='"+url+"&p=0'>首页</a>"+"<a class='num' href='"+url+"&p="+(pp-2)+"'>上一页</a>"+strbe;}
var strmid="<span class='current'>"+pp+"</span>";
var strlater="";
var pagelater=pp+beforlaterln;
for(var i=pp; i < pagelater; i++){
if(i<countpage){
strlater+="<a class='num' href='"+url+"&p="+(i)+"'>"+(i+1)+"</a>";
}
}
if(pp>=countpage){}else{strlater+="<a class='num' href='"+url+"&p="+pp+"'>下一页</a>"+"<a class='num' href='"+url+"&p="+(countpage-1)+"'>尾页</a>";}
page=strbe+strmid+strlater;
/**/
}else {
countpage+=1;//总页数
currentpage=currentpage>countpage-1?countpage-1:currentpage;
var pp=currentpage+1;
var strbe="";
var pagebefore=pp-beforlaterln-1;
for(var i=pp; i > pagebefore; i--){
if(i>0 && i<pp){
strbe="<a class='num' href='"+url+"&p="+(i-1)+"'>"+i+"</a>"+strbe;
}
}
if(pp<=1){strbe="";}else{strbe="<a class='num' href='"+url+"&p=0'>首页</a>"+"<a class='num' href='"+url+"&p="+(pp-2)+"'>上一页</a>"+strbe;}
var strmid="<span class='current'>"+pp+"</span>";
var strlater="";
var pagelater=pp+beforlaterln;
for(var i=pp; i < pagelater; i++){
if(i<countpage){
strlater+="<a class='num' href='"+url+"&p="+(i)+"'>"+(i+1)+"</a>";
}
}
if(pp>=countpage){}else{strlater+="<a class='num' href='"+url+"&p="+pp+"'>下一页</a>"+"<a class='num' href='"+url+"&p="+(countpage-1)+"'>尾页</a>";}
page=strbe+strmid+strlater;
}
return "共"+countpage+"页"+page;
}
var page=pagestr("http://www.abc.com?",195,11,10,8);
document.getElementById("pg").innerHTML=page;
</script>运行后得到一下字符串
共20页<a class='num' href='http://www.abc.com?&p=0'>首页</a>
<a class='num' href='http://www.abc.com?&p=10'>上一页</a>
<a class='num' href='http://www.abc.com?&p=3'>4</a>
<a class='num' href='http://www.abc.com?&p=4'>5</a>
<a class='num' href='http://www.abc.com?&p=5'>6</a>
<a class='num' href='http://www.abc.com?&p=6'>7</a>
<a class='num' href='http://www.abc.com?&p=7'>8</a>
<a class='num' href='http://www.abc.com?&p=8'>9</a>
<a class='num' href='http://www.abc.com?&p=9'>10</a>
<a class='num' href='http://www.abc.com?&p=10'>11</a>
<span class='current'>12</span>
<a class='num' href='http://www.abc.com?&p=12'>13</a>
<a class='num' href='http://www.abc.com?&p=13'>14</a>
<a class='num' href='http://www.abc.com?&p=14'>15</a>
<a class='num' href='http://www.abc.com?&p=15'>16</a>
<a class='num' href='http://www.abc.com?&p=16'>17</a>
<a class='num' href='http://www.abc.com?&p=17'>18</a>
<a class='num' href='http://www.abc.com?&p=18'>19</a>
<a class='num' href='http://www.abc.com?&p=19'>20</a>
<a class='num' href='http://www.abc.com?&p=12'>下一页</a>
<a class='num' href='http://www.abc.com?&p=19'>尾页</a>希望对大家有帮助，谢谢！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读