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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
使用JavaScript破解web
Sep 28 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
创建nuxt.js项目流程图解
Mar 13 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
js实现车辆管理系统
Aug 26 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 mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
基于Django的python验证码(实例讲解)
2017/10/23 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python中的取模运算方法
2018/11/10 Python
python读取几个G的csv文件方法
2019/01/07 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
python递归下载文件夹下所有文件
2019/08/31 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
《望庐山瀑布》教学反思
2014/04/22 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
罚款通知怎么写
2015/04/22 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
让生命充满爱观后感
2015/06/08 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL