JavaScript实现仿静态分页的方法详解-js教程-PHP中文网

首页

web前端

js教程

JavaScript实现仿静态分页的方法详解

Sep 06, 2017 am 10:37 AM

javascript js 方法

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

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

运行效果如下图所示：

具体代码如下：

&amp;lt;HTML&gt;
&amp;lt;HEAD&gt;
&amp;lt;TITLE&gt; 静态分页&amp;lt;/TITLE&gt;
&amp;lt;style&gt;
* {
font-size:10.2pt;
font-family:tahoma;
line-height:150%;
}
.pContent
{
border:1px solid red;
background-color:#FFD2D3;
width:500px;
word-break:break-all;
margin:10px 0px 10px;
padding:10px;
}
&amp;lt;/style&gt;
&amp;lt;/HEAD&gt;
&amp;lt;BODY&gt;
header
&amp;lt;p id=&quot;pPagenation&quot;&gt;&amp;lt;/p&gt;
&amp;lt;p id=&quot;pContent&quot;&gt;&amp;lt;/p&gt;
footer
&amp;lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;
&amp;lt;!--
s=&quot;&amp;lt;p&gt;jquery SimpleModal Ajax弹出对话框插件，拥有简洁风格的网页弹出层插件，风格设计比较简约大方，可弹出图片、弹出含有HTML代码的p对话框等，类似的效果已有很多，请根据自己的需要采用吧。。jquery SimpleModal Ajax弹出对话框插件，拥有简洁风格的网页弹出层插件，风格设计比较简约大方，可弹出图片、弹出含有HTML代码的p对话框等，类似的效果已有很多，请根据自己的需要采用吧。&amp;lt;/p&gt;&quot;;
function DHTMLpagenation(content) { with (this)
{
this.content=content;
this.contentLength=content.length;
this.pageSizeCount;
this.perpageLength=100;
this.currentPage=1;
this.regularExp=/d+/;
this.pDisplayContent;
this.contentStyle=null;
this.strDisplayContent=&quot;&quot;;
this.pDisplayPagenation;
this.strDisplayPagenation=&quot;&quot;;
arguments.length==2?perpageLength=arguments[1]:&quot;&quot;;
try {
pExecuteTime=document.createElement(&quot;p&quot;);
document.body.appendChild(pExecuteTime);
}
catch(e)
{
}
if(document.getElementById(&quot;pContent&quot;))
{
pDisplayContent=document.getElementById(&quot;pContent&quot;);
}
else
{
try
{
pDisplayContent=document.createElement(&quot;p&quot;);
pDisplayContent.id=&quot;pContent&quot;;
document.body.appendChild(pDisplayContent);
}
catch(e)
{
return false;
}
}
if(document.getElementById(&quot;pPagenation&quot;))
{
pDisplayPagenation=document.getElementById(&quot;pPagenation&quot;);
}
else
{
try
{
pDisplayPagenation=document.createElement(&quot;p&quot;);
pDisplayPagenation.id=&quot;pPagenation&quot;;
document.body.appendChild(pDisplayPagenation);
}
catch(e)
{
return false;
}
}
DHTMLpagenation.initialize();
return this;
}};
DHTMLpagenation.initialize=function() { with (this)
{
pDisplayContent.className=contentStyle!=null?contentStyle:&quot;pContent&quot;;
if(contentLength&amp;lt;=perpageLength)
{
strDisplayContent=content;
pDisplayContent.innerHTML=strDisplayContent;
return null;
}
pageSizeCount=Math.ceil((contentLength/perpageLength));
DHTMLpagenation.goto(currentPage);
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayPage=function() { with (this)
{
strDisplayPagenation=&quot;分页：&quot;;
if(currentPage&amp;¤tPage!=1)
strDisplayPagenation+=&quot;&amp;lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;DHTMLpagenation.previous()&quot;&gt;上一页&amp;lt;/a&gt;  &quot;;
else
strDisplayPagenation+=&quot;上一页  &quot;;
for(var i=1;i&amp;lt;=pageSizeCount;i++)
{
if(i!=currentPage)
strDisplayPagenation+=&quot;&amp;lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;DHTMLpagenation.goto(&quot;+i+&quot;);&quot;&gt;&quot;+i+&quot;&amp;lt;/a&gt;  &quot;;
else
strDisplayPagenation+=i+&quot;  &quot;;
}
if(currentPage&amp;¤tPage!=pageSizeCount)
strDisplayPagenation+=&quot;&amp;lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;DHTMLpagenation.next()&quot;&gt;下一页&amp;lt;/a&gt;  &quot;;
else
strDisplayPagenation+=&quot;下一页  &quot;;
strDisplayPagenation+=&quot;共 &quot; + pageSizeCount + &quot; 页，每页&quot; + perpageLength + &quot; 字符，调整字符数：&amp;lt;input type=&quot;text&quot; value=&quot;&quot;+perpageLength+&quot;&quot; id=&quot;ctlPerpageLength&quot;&gt;&amp;lt;input type=&quot;button&quot; value=&quot;确定&quot; onclick=&quot;DHTMLpagenation.change(document.getElementById(&quot;ctlPerpageLength&quot;).value);&quot;&gt;&quot;;
pDisplayPagenation.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(&quot;page parameter error!&quot;);
}
DHTMLpagenation.displayPage();
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
pDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
if(regularExp.test(iPerpageLength))
{
DHTMLpagenation.perpageLength=iPerpageLength;
DHTMLpagenation.currentPage=1;
DHTMLpagenation.initialize();
}
else
{
alert(&quot;请输入数字&quot;);
}
}};
DHTMLpagenation(s,100);
//--&gt;
&amp;lt;/SCRIPT&gt;
&amp;lt;/BODY&gt;
&amp;lt;/HTML&gt;

登录后复制

以上是JavaScript实现仿静态分页的方法详解的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn