javaScript：页码实现

在js页面实现数据分页（假设：每页显示n条数据，当前页码为page）

后台响应数据：1、数据总个数 2、page*n~page*n+n条数据显示信息

html：

<div class="page"></div>

css：

.page {float: left;width: 100%;height: 5%;
}
.page ul{width: 50%;height: 40px;margin-left: 40%;
}
.page ul li{float: left;width: 40px;height: 30px;font-size: 15px;line-height: 22px;margin-left: 10px;border: 2px solid #b1dae3;border-radius: 10px;color: white;
}
.page ul li a {color: white;font-weight: bold;font-size: 17px;
}
.page ul .noactive{background-color: #d4d3e1cc;cursor: not-allowed;
}
.page ul .noactive:hover{border: 2px solid #b1dae3;
}
.page ul .noactive a{cursor: not-allowed;
}
.page ul li:hover{border: 2px solid #8080ff;
}

js：

//页码加载（n为6，当前页码为x，x从1开始）
var sum = item.sum;    //sum为后台响应给的数据
str = '<ul>';
//计算总页数
if(sum%6 > 0) {        sum = parseInt(sum/6) + 1;
} else {sum = parseInt(sum/6);
}
//页面上最多显示5个页码，其中一个必定包括当前页码
var cnt = 4;
//当前页数为1时（考虑边界问题，解决除页码之外的符号（就是显示页码两边...的按钮））
if(x == 1) {    str += '<li class="noactive"><a>...</a></li>' + '<li class="noactive"><a>1</a></li>';
} else {str += '<li><a href="javascript:void(0);">...</a></li>';//当前页面预计是应该放中间，左右两边各两个相邻页码var y = 2;//（sum-x）为大于当前页数的页码个数，若小于2，则重新计算当前页码左右两边显示的页码数if(sum-x < 2) {y = 4 - sum + x;}//y为左边应该显示的页码个数for(var i = x-y; i < x; i++) {//考虑边界超出问题if(i <= 0) {continue;}str += '<li><a href="javascript:void(0);">' + i + '</a></li>';cnt--;}str += '<li class="noactive"><a>' + x + '</a></li>';
}
//cnt大于0说明右边还可放置cnt个页码
for(var i = x; cnt > 0; i++) {//边界问题考虑if(i+1 <= sum) {str += '<li><a href="javascript:void(0);" onclick="Mywork.loadingWait(' + i + ', ' + temp + ')">' + (i+1) + '</a></li>';cnt--;} else {break;}
}
//右边可放置个数为0了，但右边仍有页码没有显示
if(cnt == 0 && x+2 < sum) {str += '<li><a href="javascript:void(0);">...</a></li>';
} else {str += '<li class="noactive"><a>...</a></li>';
}
str += '</ul>';
document.getElementById('page').innerHTML = str;

效果页面：

总页数为4，当前页数为1时的效果图 :

总页数为8，当前页数分别为4、6、8页时的效果图：

若有错误，请指出，谢谢^^

javaScript：页码实现相关推荐

javascript 页码控件
<!DOCTYPE html> <html> <head> <meta http-equiv=content-type content="text/ ...
vue：分页页码组件
如果对你有帮助,请点个赞,谢谢 (●'◡'●) <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
前端通过Ajax请求从后台返回数据到页面显示，实现分页功能
本文纯属自己平时编代码时的总结,主要用于自己以后方便查看后端controller代码 JsonMessage jsonMessage = new JsonMessage(); //********* ...
javascript分页类支持页码格式
前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然后在载入的时候进行分页,网上很多jquery,property等都实现了,但 ...
手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】
前端的那些基本标签
针对JavaScript的常用事件、对象捕获和使用技巧
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event ...
《JavaScript编程实战》
<JavaScript编程实战> 基本信息原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...
关于javascript代码优化的8点建议
前面的话本文将详细介绍JS编程风格的几个要点松耦合当修改一个组件而不需要更改其他组件时,就做到了松耦合 1.将JS从CSS中抽离:不要使用CSS表达式 //不好的做法 .box{width: e ...
javascript各种小技巧
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...

javaScript：页码实现

javaScript：页码实现

javaScript：页码实现相关推荐

最新文章

热门文章