一个通用的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><ahref="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><linkhref="${pageContext.request.contextPath}/common/css/pagination.css"rel="stylesheet" type="text/css" /><scriptsrc="${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>
页:
[1]