一个通用的JavaScript分页

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_onclick=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);//当前所在第几页
&nbsp;      page.initPage("page");//初始化页面
	function pagination_data()
	{
		alert(page.getIndexPage()+":"+page.getMaxNum());
	}
</script>
	</body>
</html>