suchen

Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Imitationsmethode für statische Paging-Implementierung_Javascript-Fähigkeiten

JavaScript-Imitationsmethode für statische Paging-Implementierung_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:47:251090Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode der JavaScript-Imitation von statischem Paging. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies basiert auf JavaScript, um die Funktion von Webseiten zu imitieren, ohne statisches Paging zu aktualisieren. Es wird geschätzt, dass bei der tatsächlichen Verwendung einige Änderungen vorgenommen werden, da der Inhalt, der paginiert werden muss, derzeit in JS gespeichert ist Wenn die Daten hier verwendet werden, müssen sie in eine Datenbank umgewandelt werden. Ich weiß nicht, wie praktisch es ist, sie anzupassen.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt: 

<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&#63;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&#63;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&&currentPage!=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&&currentPage!=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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
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
Vorheriger Artikel：Das JS-Skript springt je nach mobilem Browsertyp (zwei Methoden) zur mobilen WAP-Website. Javascript-KenntnisseNächster Artikel：Das JS-Skript springt je nach mobilem Browsertyp (zwei Methoden) zur mobilen WAP-Website. Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen