never-online 's Tech Blog In CSDN

never online - Everlasting love for angela.

rank liuID：BlueDestiny

共148281次访问，排名486好友17人，关注者28人
这个家伙很懒, 没有留言作案的证据...
另,貌似我的资料被CSDN出卖了...

BlueDestiny的文章

原创 114 篇

翻译 0 篇

转载 8 篇

评论 223 篇

never-online的公告

Web:
www.never-online.net
Email:
BlueDestiny##126.com
QQ:
77091373

最近评论

ibsrvk：wow power leveling

zyhomepage：支持一下

clicksun：如果要制作纯CSS+DIV的圆角方框图形，可以到这里直接在线制作，什么颜色都可以：http://corner.cha.la

C_SuperMe：可以好好学习一下啊！！

lrh165：我也是拷贝了你的代码,但是内容无法显示,能否给点帮助,谢了先!
lrh165@163.com

文章分类

收藏

相册

JS & DHTML

常去之地

我的网站

友情链接

存档

软件项目交易

订阅我的博客

超长文章自动分页（客户端版）收藏

新一篇: javascript 版 AdRotator | 旧一篇: 关于asp模板类

一般情况，都在服务器端完成，生成类似02.html,20_1.html，这样一来一个文章就有两个文件，假如说，我数据库中有1000条记录，平均每条记录生成2个html静态文件，那么将会有2000个文件。我是不太喜欢文件太多的，于是想到用客户端来进行分页查看，下面是代码（代码没有经过优化），仅为测试版。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
* {
font-size:10.2pt;
font-family:tahoma;
line-height:150%;
}
.divContent
{
border:1px solid red;
background-color:#FFD2D3;
width:500px;
word-break:break-all;
margin:10px 0px 10px;
padding:10px;
}
</style>
</HEAD>
<BODY>
header
<div id="divPagenation"></div>
<div id="divContent"></div>
footer
<SCRIPT LANGUAGE="JavaScript">
<!--
s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p>";

// 封装DHTMLpagenation

function DHTMLpagenation(content) { with (this)
{
	// client static html file pagenation
	// Scipit by blueDestiny

this.content=content; // 内容
	this.contentLength=content.length; // 内容长度
	this.pageSizeCount; // 总页数
	this.perpageLength=100; //default perpage byte length.
	this.currentPage=1; // 起始页为第1页
	//this.regularExp=/.+[\?\&]{1}page=(\d+)/;
	this.regularExp=/\d+/; // 建立正则表达式，匹配数字型字符串。

this.divDisplayContent;
	this.contentStyle=null;
	this.strDisplayContent="";
	this.divDisplayPagenation;
	this.strDisplayPagenation="";
	
	// 把第二个参数赋给perpageLength;
	arguments.length==2?perpageLength=arguments[1]:'';

try {
		divExecuteTime=document.createElement("DIV");
		document.body.appendChild(divExecuteTime);
	}
	catch(e)
	{
	}

// 得到divPagenation容器。
	if(document.getElementById("divPagenation"))
	{
		divDisplayPagenation=document.getElementById("divPagenation");
	}
	else
	{
		try
		{
			divDisplayPagenation=document.createElement("DIV");
			divDisplayPagenation.id="divPagenation";
			document.body.appendChild(divDisplayPagenation);
		}
		catch(e)
		{
			return false;
		}
	}

// 得到divContent容器
	if(document.getElementById("divContent"))
	{
		divDisplayContent=document.getElementById("divContent");
	}
	else
	{
		try
		{
			divDisplayContent=document.createElement("DIV");
			divDisplayContent.id="divContent";
			document.body.appendChild(divDisplayContent);
		}
		catch(e)
		{
			return false;
		}
	}

DHTMLpagenation.initialize();
	return this;
	
}};

//初始化分页；
//包括把加入CSS，检查是否需要分页
DHTMLpagenation.initialize=function() { with (this)
{
	divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";
	if(contentLength<=perpageLength)
	{
		strDisplayContent=content;
		divDisplayContent.innerHTML=strDisplayContent;
		return null;
	}

pageSizeCount=Math.ceil((contentLength/perpageLength));

DHTMLpagenation.goto(currentPage);
	DHTMLpagenation.displayContent();
}};

//显示分页栏
DHTMLpagenation.displayPage=function() { with (this)
{
	strDisplayPagenation="分页：";

if(currentPage&¤tPage!=1)
		strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>  ';
	else
		strDisplayPagenation+="上一页  ";

for(var i=1;i<=pageSizeCount;i++)
	{
		if(i!=currentPage)
			strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>  ';
		else
			strDisplayPagenation+=i+"  ";
	}

if(currentPage&¤tPage!=pageSizeCount)
		strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>  ';
	else
		strDisplayPagenation+="下一页  ";

strDisplayPagenation+="共 " + pageSizeCount + " 页，每页" + perpageLength + " 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";

divDisplayPagenation.innerHTML=strDisplayPagenation;
}};
//上一页
DHTMLpagenation.previous=function() { with(this)
{
	DHTMLpagenation.goto(currentPage-1);
}};
//下一页
DHTMLpagenation.next=function() { with(this)
{
	DHTMLpagenation.goto(currentPage+1);
}};
//跳转至某一页
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
	startime=new Date();
	if(regularExp.test(iCurrentPage))
	{
		currentPage=iCurrentPage;
		strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
	}
	else
	{
		alert("page parameter error!");
	}
	DHTMLpagenation.displayPage();
	DHTMLpagenation.displayContent();
}};
//显示当前页内容
DHTMLpagenation.displayContent=function() { with (this)
{
	divDisplayContent.innerHTML=strDisplayContent;
}};
//改变每页的字节数
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
	if(regularExp.test(iPerpageLength))
	{
		DHTMLpagenation.perpageLength=iPerpageLength;
		DHTMLpagenation.currentPage=1;
		DHTMLpagenation.initialize();
	}
	else
	{
		alert("请输入数字");
	}
}};

// 接口API
// DHTMLpagenation(strContent[,perpageLength])

DHTMLpagenation(s,100);

// Power By blueDestiny,never-online
//-->
</SCRIPT>
</BODY>
</HTML>

发表于 @ 2006年02月16日 15:11:00|评论(loading...)|编辑

新一篇: javascript 版 AdRotator | 旧一篇: 关于asp模板类

#JK 发表于2006-02-27 10:25:00 IP: 219.133.232.*: 不大明白客户端分页有什么意义。

#会摇尾巴的狼发表于2006-05-12 11:22:00 IP: 220.248.27.*: 创意很不错.虽然没有减少服务器端到客户端的数据量,但只是第一次把页面的数据下载完以后,以后分页页面的数据都是在本地显现的.减少了和服务器连络的次数.我的MSN是:tyoujierai@hotmail.com,希望以后有机会交流..^_^

#blueDestiny 发表于2006-05-12 15:05:00 IP: 219.159.89.*: @ 会摇尾巴的狼：

这只是个模型，更复杂的应是智能分页，只可惜，我最近也没有精神把它给写完去了。也许以后想起来，可能会更它给写完。

#Johnny 发表于2006-10-19 17:07:00 IP: 198.53.208.*: 这个东西我真的很需要...但是
不知道为什麽,你的代码我无法运行成功
header 与 footer 中间的内容始终无法显示...???

#never-online 发表于2006-11-16 19:41:00 IP: 124.226.48.*: 已经发Email给你了。

#donotsaygoodbye 发表于2007-03-12 16:27:03 IP: 60.0.4.*: 我这header 与 footer 中间的内容始终无法显示,为什么呢

#yys777 发表于2007-06-02 13:01:35 IP: 202.103.38.*: 我也想看到

#lrh165 发表于2008-02-20 15:44:32 IP: 221.0.59.*: 我也是拷贝了你的代码,但是内容无法显示,能否给点帮助,谢了先!
lrh165@163.com

发表评论

姓名：
主页：
校验码：看不清,换一张

当前用户设置只有注册用户才能发表评论。如果你没有登录，请点击登录