自己做一個js的分頁代碼
test.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="page-common.js"></script>
<link href="pagination.css" type="text/css" rel="stylesheet" />
</head>
<body οnlοad="getQueryPage()">
<div id="pageQuery"><div>
</body>
<script type="text/javascript">
var divPage =new Pagination({id:'pageQuery',totalNum:1000,_onclick:function(currentIndex,maxNum){alert(currentIndex+":"+maxNum)}});
function getQueryPage(){
divPage.initPage("divPage");
}
</script>
</html>
page-common.js
Pagination=function(option)
{
this.totalNum=option.totalNum==undefined?0:option.totalNum;
this.maxNum=option.maxNum==undefined?10:option.maxNum;
this._οnclick=option._οnclick==undefined?function(){}:option._onclick;
this.breakpage = option.breakpage==undefined?5:option.breakpage;
this.currentposition =option.currentposition==undefined?0:option.currentposition;
this.breakspace = option.currentposition==undefined?2:option.currentposition;
this.maxspace = option.maxspace==undefined?4:option.maxspace;
this.currentpage=option.currentpage==undefined?1:option.currentpage;
this.perpage=option.perpage==undefined?10:option.perpage;
this.id =option.id;
this.className=option.classCss==undefined?"manu":option.classCss;
this.initPage = function(pageName)
{
var count = this.totalNum;
this.perpage = this.maxNum;
if (this.currentpage==null){
this.currentpage = 1;
}else{
this.currentpage = parseInt(this.currentpage);
}
var pagecount = Math.floor(count/this.perpage)+1;
var pagestr = "";
var prevnum = this.currentpage-this.currentposition;
var nextnum = this.currentpage+this.currentposition;
if(prevnum<1) prevnum = 1;
if(nextnum>pagecount) nextnum = pagecount;
pagestr += (this.currentpage==1)?'<span class="disabled"> <上一頁</span>':'<span><a href="javascript:'+pageName+'.page_onclick('+(this.currentpage-1)+',/''+pageName+'/')"><上一頁</a></span>';
if(prevnum-this.breakspace>this.maxspace){
for(i=1;i<=this.breakspace;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
pagestr += '...';
for(i=pagecount-this.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 += (this.currentpage==i)?'<span class="current">'+i+'</span>':'<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
}
if(pagecount-this.breakspace-nextnum+1>this.maxspace){
for(i=nextnum+1;i<=this.breakpage;i++)
pagestr += '<a href="javascript:'+pageName+'.page_onclick('+i+',/''+pageName+'/')">'+i+'</a>';
pagestr += '<span class="break">...</span>';
for(i=pagecount-this.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 += (this.currentpage==pagecount)?'<span class="disabled">下一頁 ></span>':'<a href="javascript:'+pageName+'.page_onclick('+(this.currentpage+1)+',/''+pageName+'/')">下一頁 ></a>';
document.getElementById(this.id).className=this.className;
document.getElementById(this.id).innerHTML=pagestr;
}
this.page_οnclick=function(num,pageStr)
{
this.currentpage=num;
this._onclick(this.currentpage,this.maxNum);
this.initPage(pageStr);
};
}
pagination.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
}
