客户端技术分页控件javascript+css，可用于任何服务器端技术

分页控件中经常见到的是和服务器端结合的技术实现，但是适用性不全面，如下是我编写的一个客户端技术控件，有兴趣的可以一起研究一下。

page.js

// JavaScript Document
// UTF-8
//author: steven yang
//email: yifi@tom.com
//功能: 分页导航栏生成
//生成导航参数:
//nav所在div id:navDivId
//当前页: nowPageNo
//最大页: maxPageNo
//每页行数: lineNum
//需要提交的form id or name: formIdOrName
//需要提交的变量，导航div必需在form中!
//每页行数:navLineNum
//页号:navPageNo
StevenPageNav = function(navDivId, nowPageNo, maxPageNo, lineNum, formIdOrName){
this.navDivId = navDivId;
this.nowPageNo = nowPageNo;
this.maxPageNo = maxPageNo;
this.minPageNo = 1;
this.lineNum = lineNum;
this.formIdOrName = formIdOrName;
this.divHTML = "";
};
//兼容性修改注册事件 MSDN提供
if (!window.addEventListener) {
window.addEventListener = function (type, listener, useCapture) {
attachEvent('on' + type, function() { listener(event) });
}
}
StevenPageNav.setup = function(navDivId, nowPageNo, maxPageNo, lineNum, formIdOrName){
window.addEventListener(
"load",
function(){
(new StevenPageNav(navDivId, nowPageNo, maxPageNo, lineNum, formIdOrName)).makeNavDiv();
}
,false);
};
//注意在构建html时在合适的时候用单引号
StevenPageNav.prototype.makeNavDiv = function(){
this.divHTML = "<div class=/"navmain/">"

//生成页号列表
var mpnl = makePageNoList(this.minPageNo, this.maxPageNo, this.lineNum, this.nowPageNo);
/*
for(var i in mpnl){
alert(i+"/n"+mpnl[i]);
}
*/

if(mpnl.viewFirstPage){
this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"first page/" onclick=/"return StevenPageNav.clickNum(1, '"+this.formIdOrName+"')/"><<</a></div>"
this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"previous page/" onclick=/"return StevenPageNav.clickNum("+(this.nowPageNo-this.lineNum)+", '"+this.formIdOrName+"')/">...</a></div>"
}

if(this.nowPageNo > this.minPageNo){
this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"previous/" onclick=/"return StevenPageNav.clickNum("+(this.nowPageNo-1)+", '"+this.formIdOrName+"')/"> < </a></div>"
}

for(var no = mpnl.startIndex; no <= mpnl.endIndex; no++){
this.divHTML += "<a href="/" mce_href="/""#/" ";
if(no == this.nowPageNo){
this.divHTML += "class=/"active/"";
}

this.divHTML += " onclick=/"return StevenPageNav.clickNum("+no+",'"+this.formIdOrName+"')/">"+no+"</a>";
}
if(this.nowPageNo < this.maxPageNo){
this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"next/" onclick=/"return StevenPageNav.clickNum("+(this.nowPageNo+1)+", '"+this.formIdOrName+"')/"> > </a></div>"
}
if(mpnl.viewLastPage){
this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"next page/" onclick=/"return StevenPageNav.clickNum("+(this.nowPageNo+this.lineNum)+", '"+this.formIdOrName+"')/">...</a></div>"
this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"last page/" onclick=/"return StevenPageNav.clickNum("+(this.maxPageNo)+", '"+this.formIdOrName+"')/">>></a></div>"
}
this.divHTML += "<div><input name=/"navLineCount/" value=/""+this.lineNum+"/"/>/";
this.divHTML += "<input name=/"navPageNo/" value=/""+this.nowPageNo+"/"/>/"+this.maxPageNo;
this.divHTML += "<input type=/"submit/" value=/"Go/"/></div>"
this.divHTML += "</div>";

document.getElementById(this.navDivId).innerHTML = this.divHTML;
};
StevenPageNav.clickNum = function(pageNo, formIdOrName){
var f = (document.getElementById("formIdOrName") || document.forms[formIdOrName]);
f.elements["navPageNo"].value = pageNo;
//alert(f.elements["navPageNo"].value);
f.submit();
return false;
};
//生成页号列表信息
function makePageNoList(minPageNo, maxPageNo, listPageCount, currPageNo){
var ret = {};
var startIndex = currPageNo - window.parseInt(listPageCount / 2);
var endIndex = currPageNo + window.parseInt(listPageCount / 2);

if(startIndex < minPageNo){
endIndex += minPageNo - startIndex;
startIndex = minPageNo;
if(endIndex > maxPageNo){
endIndex = 	maxPageNo;
}
}

if(endIndex > maxPageNo){
startIndex -= endIndex - maxPageNo;
endIndex = maxPageNo;
if(startIndex < minPageNo){
startIndex = minPageNo;
}
}

ret.startIndex = startIndex;
ret.endIndex = endIndex;

if(startIndex > minPageNo){
ret.viewFirstPage = true;
}else{
ret.viewFirstPage = false;
}

if(endIndex < maxPageNo){
ret.viewLastPage = true;
}else{
ret.viewLastPage = false;
}

return ret;
}

对于代码中自动注册onload事件的代码原理，见另一篇 [博客]

page.css

@charset "utf-8";
/* CSS Document */
.navmain {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
text-align:center;
margin:0px auto;
/*for before IE 6*/
padding:5px;
}
.navmain *{
margin:0px;
padding:0px;
border:none;
-moz-border-radius: 10px;
}
.navmain div{
display:inline;
}
.navmain a{
border:solid 1px #0000FF;
padding:3px 5px;
margin:0px 1px;
background-color:#00FF00;
}
.navmain a:link, .navmain a:visited{
color:#0000FF;
text-decoration:none;
}
.navmain a:hover, .navmain a:active{
background-color:#FF0;
}
.navmain .active{
background-color:#FF0;
}
.navmain input{
width:20px;
font-size:12px;
border:solid 1px green;
}

其中用到了moz专用的圆角效果

代码示例

page.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>
<link href="page.css" mce_href="page.css" rel="stylesheet" type="text/css" />
<mce:script language="javascript" type="text/javascript" src="page.js" mce_src="page.js"></mce:script>
<mce:script language="javascript" type="text/javascript"><!--
StevenPageNav.setup("pageformnav", 11, 50, 7, "pageform");
// --></mce:script>
</head>
<body>
<form id="pageform" method="post" action="http://g.cn">
<input name="a"/>
<input name="b"/>
<button type="submit">提交</button>
<div id="pageformnav"></div>
</form>
</body>
</html>

效果展示

FF3.0+



IE6.0+



have fun!