JavaScript仿静态分页实现方法

时间：2021-05-26

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

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

运行效果如下图所示：

具体代码如下：

<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&&currentPage!=1)strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>&nbsp;&nbsp;';elsestrDisplayPagenation+="上一页&nbsp;&nbsp;";for(var i=1;i<=pageSizeCount;i++){if(i!=currentPage)strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';elsestrDisplayPagenation+=i+"&nbsp;&nbsp;";}if(currentPage&&currentPage!=pageSizeCount)strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';elsestrDisplayPagenation+="下一页&nbsp;&nbsp;";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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章