简单的前端开发 分页怎么做?

做项目的时候,用到了分页功能,在此做个笔记,方便以后查阅。
html 代码

<!DOCTYPE html>
<head>
<metacharset=”UTF-8″>
<title>前端开发怎么实现分页?</title>
<script type=”text/javascript”>
vartotalpage,pagesize,cpage,count,curcount,out;
//初始化
cpage=1;
pagesize=10;//每页的数量
totalpage=20;//页数
out=””;
//分页
functiongoto(target){
cpage=target;//把页面计数定位到第几页
sett();
}
functionsett(){
if (totalpage<=5) {//总页数小于五页 ,循环页数
for (count=1;count<=totalpage;count++) {
if (count!=cpage) {
out=out+”<a href=’javascript:void(0)’ onclick=’goto(“+count+”)’>”+count+”</a>”;
}else{
out=out+”<span class=’current’ >”+count+”</span>”;
}
}
}
if (totalpage>5) {//总页数大于五页
if (parseInt((cpage-1) /5) ==0) {
for (count=1;count<=5;count++) {
if (count!=cpage) {
out=out+”<a href=’javascript:void(0)’ onclick=’goto(“+count+”)’>”+count+”</a>”;
}else{
out=out+”<span class=’current’>”+count+”</span>”;
}
}
out=out+”<a href=’javascript:void(0)’ onclick=’goto(“+count+”)’> 下一页 </a>”;
}elseif (parseInt((cpage-1) /5) ==parseInt(totalpage/5)) {
out=out+”<a href=’javascript:void(0)’ onclick=’goto(“+ (parseInt((cpage-1) /5) *5) +
“)’>上一页</a>”;
for (count=parseInt(totalpage/5) *5+1;count<=totalpage;count++) {
if (count!=cpage) {
out=out+”<a href=’javascript:void(0)’ onclick=’goto(“+count+”)’>”+count+”</a>”;
}else{
out=out+”<span class=’current’>”+count+”</span>”;
}
}
}else{
out=out+”<a href=’javascript:void(0)’ onclick=’goto(“+ (parseInt((cpage-1) /5) *5) +
“)’>上一页</a>”;
if (totalpage%5==0&&cpage>= (totalpage/5-1) *5+1) {
for (count= (parseInt(totalpage/5) -1) *5+1;count<=totalpage;count++) {
if (count!=cpage) {
out=out+”<a href=’javascript:void(0)’ onclick=’goto(“+count+”)’>”+count+
“</a>”;
}else{
out=out+”<span class=’current’>”+count+”</span>”;
}
}
}else{
for (count=parseInt((cpage-1) /5) *5+1;count<=parseInt((cpage-1) /5) *5+5;count++) {
if (count!=cpage) {
out=out+”<a href=’javascript:void(0)’ onclick=’goto(“+count+”)’>”+count+
“</a>”;
}else{
out=out+”<span class=’current’>”+count+”</span>”;
}
}
out=out+”<a href=’javascript:void(0)’ onclick=’goto(“+count+”)’> 下一页</a>”;
}
}
}
document.getElementById(“waChe”).innerHTML=”<div id=’waChe’><span id=’info’>共”+totalpage+”页|第”+
cpage+”页<\/span>”+out+”<\/div>”;
out=””;
}
window.onload = function () {
sett();//调用分页
}
</script>
<style type=”text/css”>
#waChea,
#waChea:visited,
#waChea:hover,
#waChe.current,
#waChe#info{
border:1pxsolid#DDD;
background:#fff;
display:inline-block;
margin:1px;
text-decoration:none;
font-size:12px;
text-align:center;
color:#666;
padding:8px14px;
}
#waChe.current{
border:1pxsolid#83E7E4;
background:#0F90D2;
margin:1px;
color:#fff;
}
#waChe#info{
width:auto;
}
</style>
</head>
<body>
<divclass=”totalRec”>
<divclass=”pages”>
<divid=”waChe”></div>
</div>
</div>
</body>
</html>
前端开发代码分页插件|前端开发 分页怎么做?|网站前端开发
» 本文来自:前端开发者 » 《简单的前端开发 分页怎么做?》
» 本文链接地址:https://www.rokub.com/3582.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!