1.JavaScript代码
Pagination=function(id) { var totalNum=0; var maxNum=10; var pageUrl=""; var breakpage = 5; var currentposition = 0; var breakspace = 2; var maxspace = 4; var currentpage=1; var perpage=10; var id =id; this.initPage = function(pageName) { var count = this.getTotalNum(); perpage = this.getMaxNum(); if (currentpage==null){ currentpage = 1; }else{ currentpage = parseInt(currentpage); } var pagecount = Math.floor(count/perpage)+1; var pagestr = ""; var prevnum = currentpage-currentposition; var nextnum = currentpage+currentposition; if(prevnum<1) prevnum = 1; if(nextnum>pagecount) nextnum = pagecount; pagestr += (currentpage==1)?'<span class="disabled"> <上一页</span>':'<span><a href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()-1)+',\''+pageName+'\')"><上一页</a></span>'; if(prevnum-breakspace>maxspace){ for(i=1;i<=breakspace;i++) pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>'; pagestr += '...'; for(i=pagecount-breakpage+1;i<prevnum;i++) pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>'; }else{ for(i=1;i<prevnum;i++) pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>'; } for(i=prevnum;i<=nextnum;i++){ pagestr += (currentpage==i)?'<span class="current">'+i+'</span>':'<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>'; } if(pagecount-breakspace-nextnum+1>maxspace){ for(i=nextnum+1;i<=breakpage;i++) pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>'; pagestr += '<span class="break">...</span>'; for(i=pagecount-breakspace+1;i<=pagecount;i++) pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>'; }else{ for(i=nextnum+1;i<=pagecount;i++) pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',\''+pageName+'\')">'+i+'</a>'; } pagestr += (currentpage==pagecount)?'<span class="disabled">下一页 ></span>':'<a href="javascript:'+pageName+'.page_onclick('+(this.getIndexPage()+1)+',\''+pageName+'\')">下一页 ></a>'; this.$(id).className="manu" this.$(id).innerHTML=pagestr; } this.getTotalNum = function() { return totalNum; }; this.setTotalNum = function(sTotalNum) { totalNum = sTotalNum; }; this.getMaxNum = function() { return maxNum; }; this.setMaxNum=function(sMaxNum) { maxNum = sMaxNum; }; this.getIndexPage = function() { return currentpage; }; this.setIndexPage=function(sCurrentPage) { currentpage =sCurrentPage; }; this.page_οnclick=function(num,pageStr) { this.setIndexPage(num); pagination_data(); this.initPage(pageStr); }; this.$=function(objStr) { return document.getElementById(objStr); } } function $(objStr) { return document.getElementById(objStr); } function pagination_data() { }
2.CSS代码
/* CSS Document */
/* Paginator */
a img {blr:expression(this.onFocus=this.blur())}
area {blr:expression(this.onFocus=this.blur())}
.manu {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center; FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}
.manu A {
BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none
}
.manu A:hover {
BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu A:active {
BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid
}
.manu .current {
BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #036cb4 1px solid; BACKGROUND-COLOR: #036cb4
}
.manu .disabled {
BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}
3.使用例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@include file="/common/taglibs/taglibs.jsp"%>
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link
href="${pageContext.request.contextPath}/common/css/pagination.css"
rel="stylesheet" type="text/css" />
<script
src="${pageContext.request.contextPath}/common/js/page-common.js"></script>
</head>
<body>
<div id="12333"></div>
<script>
var page = new Pagination("12333");
page.setTotalNum(1000);//总共有多少条
page.setMaxNum(20);//每页显示的条数
page.setIndexPage(1);//当前所在第几页
page.initPage("page");//初始化页面
function pagination_data()
{
alert(page.getIndexPage()+":"+page.getMaxNum());
}
</script>
</body>
</html>