Ausführliche Erklärung, wie man statische Paging-Imitationen in JavaScript implementiert-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Ausführliche Erklärung, wie man statische Paging-Imitationen in JavaScript implementiert

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;

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man statische Paging-Imitationen in JavaScript implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn