模拟静态分页的JavaScript实现方法

本文通过一个实例描述了JavaScript模仿静态分页的实现方法。分享给大家参考。具体如下：

这里基于JavaScript，我们模仿不刷新网页静态分页的功能。在实际使用中，估计要做一些改动，因为目前需要分页的内容是以字符串变量的形式存在于JS中的。使用时，此处的数据应更改为从数据库中读取的数据。不知道有多实用，需要朋友慢慢调整。

运行效果如下图所示：

具体代码如下：

HTMLHEADTITLE静态分页/标题样式* { font-size :10.2 pt；font-family : Tahoma；线高：150%；}.divContent{border:1px纯红；背景-color : # ffd2d 3；宽度width:500pxword-break : break-all；margin:10px 0px 10pxpadding:10px}/style/head dyheaderdiv id=' DivPageNation '/DivDiv id=' DivContent '/DivFooterscript LANguage=' JavaScript '！-s=' pjquery简单模态Ajax弹出对话框插件，其中有一个风格简单的网页弹出层插件。它的风格设计简单大方，可以弹出包含HTML代码的图片和div对话框。类似的效果还有很多，请根据自己的需要采用。Jquery SimpleModal Ajax弹出对话框插件，具有网页弹出层插件的简单风格，样式设计简单大方，可以弹出包含HTML代码等的图片和div对话框。类似的效果还有很多，请根据自己的需要采用。

/p '；函数DHTMLpagenation(content){ with(this){ this。内容=内容；这个。内容长度=内容。长度；this . pagesizecounthis . perpagelength=100 this。current page=1；这个。常规exp=/\ d/；this . divdisplaycontentthis . contentstyle=nullthis . strdisplaycontent=this . divdisplaypagentination this . strdisplaypagentination=参数，长度==2?垂直长度=参数[1]:"";请尝试{ divExecuteTime=document。create element(' DIV ')；文件。尸体。appendchild(Divexecutetime)；} catch(e){ } if(文档。getelementbyid(' div content '){ div display content=document。getelementbyid(' div content ')；} else { try { DivDisplayContent=document。create element(' DIV ')；divdisplaycontent。id=' DivContent文件。尸体。append child(DivDisplayContent)；} catch(e){ return false；} } if(文档。getelementbyid(' DivPageNation '){ DivDisplayPageNation=document。getelementbyid(' DivPageNation ')；} else { try { DivDisplayPageNation=document。创建元素(' DIV ')；divdisplaypagenation。id=' divPagenation文件。尸体。append child(DivDisplayPageNation)；} catch(e){ return false；} } dhtmlpagenation。初始化()；归还这个；}};dhtmlpagenation。initialize=function(){ with(this){ div displaycontent。类名=内容风格！=null？contentStyle: ' divContentif(内容长度=perpageLength){ strDisplayContent=content；divdisplaycontent。innerhtml=Strdisplaycontent返回null} pageSizeCount=数学。ceil((内容长度/垂直长度))；dhtmlpagenation。goto(CurrentPage)；dhtmlpagenation。显示内容()；}};dhtmlpagenation。display page=function(){ with(this){ strdisplay page nation='分页：';if(currentPagecurrentPage！=1)StrdisplayPageNation=' a href=' JavaScript : void(0)' onclick=' dhtmlpagenation。' previous()'上一页/a '；' elsestrDisplayPagenation='上一页；for(var I=1；I=页面大小计数；我){如果（我！=CurrentPage)StrdisplayPageStation=' a href=' JavaScript : void(0)' onclick=' DHTMLPagenation。后藤(‘我’)；I '/a '；elsestdisplaypagenation=I}if(currentPagecurrentPage！=page sizecount)STrdisplayPageNation=' a href=' JavaScript : void(0)' onclick=' dhtmlpagenation。' next()'下一页/a '；' elsestrDisplayPagenation='下一页；'' strDisplayPagenation='共"页面大小计数"页，每页'垂直长度'字符，调整字符数：输入类型=“文本”值=' PerpageLength ' ' id=' ctlperpageLength '输入类型='按钮'值='确定onclick=' dhtmlpagenation。更改(文档。getelementbyid(\ ' ctlPerpageLength \ ').值);'';divdisplaypagenation。innerhtml=Strdisplaypagenation}};dhtmlpagenation。previous=function(){ with(this){ dhtmlpagenation。goto(当前页面-1)；}};dhtmlpagenation。next=function(){ with(this){ dhtmlpagenation。转到(当前第1页)；}};dhtmlpagenation。goto=function(IcurrentPage){ with(this){ start time=new Date()；if(常规exp。test(Icurrent page)){当前页面=Icurrent pagestrDisplayContent=content。substr((当前页面-1)* perpageLength，PerpageLength)；}else{alert('页面参数错误!');} dhtmlpagenation。显示页面()；dhtmlpagenation。显示内容()；}};dhtmlpagenation。display content=function(){ with(this){ div display content。innerhtml=strDisplayContent}};dhtmlpagenation。change=function(iPerpageLength){ with(this){ if(正则表达式)。test(iPerpageLength)){ dhtmlpagenation。perpagelength=iPerpageLengthdhtmlpagenation。当前页面=1；dhtmlpagenation。初始化()；}else{alert('请输入数字');}}};DHTMLpagenation(s，100)；/////SCRIPT/BODY/HTML希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。