仿豆瓣分页原型(Javascript版)
作者：tyhouse 来源：twocity.cn 时间：2007-11-05 14:04:00
仿豆瓣分页原型(Javascript版)写了个分页的样式。
自我感觉，这样的分页前后兼顾，对于用户的体验是蛮好使的
Javascript分页代码如下：
<script language="javascript" type="text/javascript">
function QueryString(item){
var sValue=location.search.match(new RegExp("[\?\&]"+item+"=([^\&]*)(\&?)","i"))
return sValue?sValue[1]:sValue
}
var count = 560;
var perpage = 20;
var currentpage = QueryString("page");
if (currentpage==null){
currentpage = 1;
}else{
currentpage = parseInt(currentpage);
}
var pagecount = Math.floor(count/perpage);
var pagestr = "";
var breakpage = 9;
var currentposition = 4;
var breakspace = 2;
var maxspace = 4;
var prevnum = currentpage-currentposition;
var nextnum = currentpage+currentposition;
if(prevnum<1) prevnum = 1;
if(nextnum>pagecount) nextnum = pagecount;
pagestr += (currentpage==1)?'<span class="prev">< 前页</span>':'<span class="prev">< <a href="?page='+(currentpage-1)+'">前页</a></span>';
if(prevnum-breakspace>maxspace){
for(i=1;i<=breakspace;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
pagestr += '<span class="break">...</span>';
for(i=pagecount-breakpage+1;i<prevnum;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}else{
for(i=1;i<prevnum;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}
for(i=prevnum;i<=nextnum;i++){
pagestr += (currentpage==i)?'<span class="thispage">'+i+'</span>':'<a href="?page='+i+'">'+i+'</a>';
}
if(pagecount-breakspace-nextnum+1>maxspace){
for(i=nextnum+1;i<=breakpage;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
pagestr += '<span class="break">...</span>';
for(i=pagecount-breakspace+1;i<=pagecount;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}else{
for(i=nextnum+1;i<=pagecount;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}
pagestr += (currentpage==pagecount)?'<span class="next">后页 ></span>':'<span class="next"><a href="?page='+(currentpage+1)+'">后页</a> ></span>';
document.getElementById("pagebar").innerHTML = pagestr;
</script>
标签：分页,javascript
0
投稿猜你喜欢
如何强制删除或恢复SQLServer正在使用的数据库
2024-01-28 16:16:56
python实现的一只从百度开始不断搜索的小爬虫
2022-05-20 10:46:18
对Python3使运行暂停的方法详解
2021-02-05 22:55:21
百度工程师讲PHP函数的实现原理及性能分析（三）
2023-10-20 01:33:03
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2023-06-15 22:47:05
封装一个python的pymysql操作类
2024-01-19 09:44:47
Python3.遍历某文件夹提取特定文件名的实例
2022-12-08 04:48:59
Selenium Webdriver元素定位的八种常用方式(小结)
2022-08-11 10:04:07
我用Python给班主任写了一个自动阅卷脚本(附源码)
2023-11-16 07:43:25
使用面向对象的技术创建高级JavaScript Web 应用程序
2008-11-03 13:00:00
基于torch.where和布尔索引的速度比较
2021-10-07 16:20:54
Ubuntu中MySQL的参数文件my.cnf示例详析
2024-01-13 02:26:28
用virtualenv建立多个Python独立虚拟开发环境
2023-10-28 06:24:07
python实现猜单词游戏
2023-01-22 22:32:43
Python基于smtplib协议实现发送邮件
2021-03-02 07:26:36
将string类型的数据类型转换为spark rdd时报错的解决方法
2023-05-03 00:35:12
磁盘写满导致MySQL复制失败的解决方案
2024-01-18 09:19:15
Python中常用数据类型使用示例概括总结
2021-09-24 02:15:26
vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)
2024-05-09 09:16:28
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2024-04-10 13:46:00