JavaScript仿靜態(tài)分頁實現(xiàn)方法
本文實例講述了JavaScript仿靜態(tài)分頁實現(xiàn)方法。分享給大家供大家參考。具體如下:
這里基于JavaScript模仿網(wǎng)頁不刷新靜態(tài)分頁的功能,實際用的時候估計要做些改動,因為目前需要分頁的內(nèi)容是作為一個字符串變量存在JS里,使用時這里的數(shù)據(jù)要變?yōu)閿?shù)據(jù)庫中讀取的數(shù)據(jù),不知道它的實用性有多高,需要的朋友慢慢調(diào)整一下。
運行效果如下圖所示:
具體代碼如下:
<HTML> <HEAD> <TITLE> 靜態(tài)分頁</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彈出對話框插件,擁有簡潔風(fēng)格的網(wǎng)頁彈出層插件,風(fēng)格設(shè)計比較簡約大方,可彈出圖片、彈出含有HTML代碼的div對話框等,類似的效果已有很多,請根據(jù)自己的需要采用吧。。jquery SimpleModal Ajax彈出對話框插件,擁有簡潔風(fēng)格的網(wǎng)頁彈出層插件,風(fēng)格設(shè)計比較簡約大方,可彈出圖片、彈出含有HTML代碼的div對話框等,類似的效果已有很多,請根據(jù)自己的需要采用吧。</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&¤tPage!=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&¤tPage!=pageSizeCount) strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一頁</a> '; else strDisplayPagenation+="下一頁 "; strDisplayPagenation+="共 " + pageSizeCount + " 頁,每頁" + perpageLength + " 字符,調(diào)整字符數(shù):<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("請輸入數(shù)字"); } }}; DHTMLpagenation(s,100); //--> </SCRIPT> </BODY> </HTML>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
JS實現(xiàn)逐頁將PDF文件轉(zhuǎn)為圖片格式
這篇文章主要為大家分享了如何通過前端js將pdf文件轉(zhuǎn)為圖片格式,并且支持翻頁預(yù)覽、以及圖片打包下載,文中的示例代碼簡潔易懂,需要的可以參考一下2023-05-05js語法學(xué)習(xí)之判斷一個對象是否為數(shù)組
這篇文章主要介紹了從javascript判斷一個對象是否為數(shù)組中學(xué)習(xí)js語法,需要的朋友可以參考下2014-05-05js變量值傳到php過程詳解 將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過程詳解 將php解析成數(shù)據(jù),傳參數(shù)去后臺,用ajax,或者原生js方式拼接url。明白原理,洞悉系統(tǒng)是先解析php,再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下2019-06-06