JavaScript仿静态分页实现方法


Posted in Javascript onAugust 04, 2015

本文实例讲述了JavaScript仿静态分页实现方法。分享给大家供大家参考。具体如下:

这里基于JavaScript模仿网页不刷新静态分页的功能,实际用的时候估计要做些改动,因为目前需要分页的内容是作为一个字符串变量存在JS里,使用时这里的数据要变为数据库中读取的数据,不知道它的实用性有多高,需要的朋友慢慢调整一下。

运行效果如下图所示:

JavaScript仿静态分页实现方法

具体代码如下:

<HTML>
<HEAD>
<TITLE> 静态分页</TITLE>
<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>jquery SimpleModal Ajax弹出对话框插件,拥有简洁风格的网页弹出层插件,风格设计比较简约大方,可弹出图片、弹出含有HTML代码的div对话框等,类似的效果已有很多,请根据自己的需要采用吧。。jquery SimpleModal Ajax弹出对话框插件,拥有简洁风格的网页弹出层插件,风格设计比较简约大方,可弹出图片、弹出含有HTML代码的div对话框等,类似的效果已有很多,请根据自己的需要采用吧。</p>";
function DHTMLpagenation(content) { with (this)
{
this.content=content;
this.contentLength=content.length;
this.pageSizeCount;
this.perpageLength=100;
this.currentPage=1;
this.regularExp=/\d+/;
this.divDisplayContent;
this.contentStyle=null;
this.strDisplayContent="";
this.divDisplayPagenation;
this.strDisplayPagenation="";
arguments.length==2?perpageLength=arguments[1]:'';
try {
divExecuteTime=document.createElement("DIV");
document.body.appendChild(divExecuteTime);
}
catch(e)
{
}
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;
}
}
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;
}
}
DHTMLpagenation.initialize();
return this;
}};
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("请输入数字");
}
}};
DHTMLpagenation(s,100);
//-->
</SCRIPT>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 日期时间 转换的方法
Feb 21 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
jQuery Ajax全解析
Feb 13 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
基于vue.js实现购物车
Jan 15 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 #Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 #Javascript
JavaScript数组各种常见用法实例分析
Aug 04 #Javascript
基于Jquery实现表单验证
Jul 20 #Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 #Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 #Javascript
javascript控制图片播放的实现代码
Jul 29 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
js上传图片预览的实现方法
2017/05/09 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
Python 文件操作的详解及实例
2017/09/18 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python删除字符串中指定字符的方法
2018/08/13 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python中count函数简单的实例讲解
2020/02/06 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
实习求职信
2013/12/01 职场文书
廉政承诺书范文
2015/04/28 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS