客户端技术分页控件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/" οnclick=/"return StevenPageNav.clickNum(1, '"+this.formIdOrName+"')/"><<</a></div>" this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"previous page/" οnclick=/"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/" οnclick=/"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 += " οnclick=/"return StevenPageNav.clickNum("+no+",'"+this.formIdOrName+"')/">"+no+"</a>"; } if(this.nowPageNo < this.maxPageNo){ this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"next/" οnclick=/"return StevenPageNav.clickNum("+(this.nowPageNo+1)+", '"+this.formIdOrName+"')/"> > </a></div>" } if(mpnl.viewLastPage){ this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"next page/" οnclick=/"return StevenPageNav.clickNum("+(this.nowPageNo+this.lineNum)+", '"+this.formIdOrName+"')/">...</a></div>" this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"last page/" οnclick=/"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!