读书人

一个分页控件合适大数据量。可以替换

发布时间: 2012-12-21 12:03:50 作者: rapoo

一个分页控件,适合大数据量。可以替换ext的分页控件

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>JS静态分页程序</title>
</head>
<style type="text/css">
a:link,a:visited,a:hover,.current,#info{
??? border:1px solid #DDD;
??? background:#F2F2F2;
??? display:inline-block;
??? margin:1px;
??? text-decoration:none;
??? font-size:12px;
??? width:15px;
??? height:15px;
??? text-align:center;
??? line-height:15px;
??? color:#AAA;
??? padding:1px 2px;
}
a:hover{
??? border:1px solid #E5E5E5;
??? background:#F9F9F9;
}
.current{
??? border:1px solid #83E7E4;
??? background:#DFF9F8;
??? margin:1px;
??? color:#27CBC7;
}
#info{
??? width:auto;
}
</style>
<body>
<div id="setpage"></div>
<script type="text/javascript">
<!--
var totalpage,pagesize,cpage,count,curcount,outstr;
//初始化
cpage = 1;
totalpage = 56;
pagesize = 10;
outstr = "";
function gotopage(target)
{????
??? cpage = target;??????? //把页面计数定位到第几页
??? setpage();
??? //reloadpage(target);??? //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
}
function setpage()
{
??? if(totalpage<=10){??????? //总页数小于十页
??????? for (count=1;count<=totalpage;count++)
??????? {??? if(count!=cpage)
??????????? {
??????????????? outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
??????????? }else{
??????????????? outstr = outstr + "<span class='current' >"+count+"</span>";
??????????? }
??????? }
??? }
??? if(totalpage>10){??????? //总页数大于十页
??????? if(parseInt((cpage-1)/10) == 0)
??????? {????????????
??????????? for (count=1;count<=10;count++)
??????????? {??? if(count!=cpage)
??????????????? {
??????????????????? outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
??????????????? }else{
??????????????????? outstr = outstr + "<span class='current'>"+count+"</span>";
??????????????? }
??????????? }
??????????? outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
??????? }
??????? else if(parseInt((cpage-1)/10) == parseInt(totalpage/10))
??????? {????
??????????? outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
??????????? for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++)
??????????? {??? if(count!=cpage)
??????????????? {
??????????????????? outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
??????????????? }else{
??????????????????? outstr = outstr + "<span class='current'>"+count+"</span>";
??????????????? }
??????????? }
??????? }
??????? else
??????? {????
??????????? outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
??????????? for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++)
??????????? {????????
??????????????? if(count!=cpage)
??????????????? {
??????????????????? outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
??????????????? }else{
??????????????????? outstr = outstr + "<span class='current'>"+count+"</span>";
??????????????? }
??????????? }
??????????? outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
??????? }
??? }????
??? document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>";
??? outstr = "";
}
setpage();??? //调用分页
//-->
</script>
</body>
</html>

详细出处参考:http://www.jb51.net/article/10414.htm

读书人网 >编程

热点推荐