仿豆瓣分页原型(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
投稿猜你喜欢
标签水平右对齐更适合中文网站
2009-05-01 11:54:00
什么是XML
2008-09-05 17:21:00
MySQL UPDATE delete 语句的速度
2008-03-12 12:22:00
非常详细的IFRAME的属性参考手册
2008-02-12 12:45:00
嵌入Flash应该考虑不支持Flash的浏览器
2007-12-20 12:29:00
Check In和Check Out的多人协作管理
2007-02-03 11:39:00
ASP导出Excel数据的四种办法
2007-08-26 18:32:00
使用正则表达式找出不包含特定字符串的条目
2010-03-02 22:06:00
观点 2009 年，IE6 走好
2009-01-04 16:46:00
常用正则表达式例子及评注说明
2008-01-03 13:04:00
HTML5中 b 和 i 标签将语义化
2008-03-16 13:43:00
IE8新特性及IE8安装使用 目录
2008-04-01 09:50:00
说说CSS的优先权 考虑CSS的继承与层叠
2008-12-11 13:33:00
HTML的优化杂记
2010-03-10 10:39:00
JavaScript性能优化小技巧，创建文档碎片
2010-03-31 18:27:00
详解PHP结构型设计模式之桥接模式Bridge Pattern
2023-05-25 06:58:55
页面表达常用方式
2010-05-27 12:42:00
SQL Server 安装出错:以前的某个程序安装已在安装计算机上创建挂起的文件操作
2010-02-23 14:48:00
你是真正的用户体验设计者吗? Ⅴ
2008-04-19 18:32:00
一个不错的javascript加密解密算法源码
2010-03-28 13:12:00