JavaScript仿静态分页怎么实现教程，这里基于JavaScript模仿网页不刷新静态分页的功能，实际用的时候可能需要做一些改动才行，因为目前需要分页的内容是作为一个字符串变量存在JS里，使用时这里的数据要变为数据库中读取的数据，不知道它的实用性有多高，需要的朋友可慢慢调整下。
运行效果如下图所示：
具体代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
<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&¤tPage!=1)strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a> ';elsestrDisplayPagenation+="上一页 ";for(var
i=1;i<=pageSizeCount;i++){if(i!=currentPage)strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a> ';elsestrDisplayPagenation+=i+" ";}if(currentPage&¤tPage!=pageSizeCount)strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a> ';elsestrDisplayPagenation+="下一页 ";strDisplayPagenation+="共 "
+ pageSizeCount + " 页，每页"
+ perpageLength + " 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' 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> |