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 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
Python编写生成验证码的脚本的教程
2015/05/04 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Django--权限Permissions的例子
2019/08/28 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
求职信范文怎么写
2014/01/29 职场文书
新手上路标语
2014/06/20 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
关于教师节的广播稿
2015/08/19 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android