最近做了个项目,有用到分页, 这类插件应该是很常用的, 虽然网上很多现成的分页插件, 但是还是想着自己写一个, 给自己积累点东西, 顺便练练手,
写了差不多3个小时左右, 代码如下:
代码:
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>分页插件</title>
6 <style type="text/css">
7 body{padding: 0px; margin: 0px;}
8 .content{width: 980px; margin: 0 auto; padding-top: 50px;}
9 ul{margin:0px; padding:0px;}
10 ul li{margin:0px; padding:0px; list-style:none; float:left;}
11 </style>
12 </head>
13 <body>
14 <div class="content">
15 <p>当前页: <input type="text" id="txtPageIndex" /></p>
16 <p>总页数: <input type="text" id="txtPageCount" /></p>
17 <p><button id="btnSubmit">submit</button></p>
18 <br />
19 <br />
20
21 <p>输出:</p>
22 <div id="pageBox">
23
24 </div>
25 </div>
26
27 <script type="text/javascript">
28 function byID(id){
29 return document.getElementById(id);
30 }
31
32 var ui = {};
33 ui.btnSubmit = byID(‘btnSubmit‘);
34 ui.txtPageIndex = byID(‘txtPageIndex‘);
35 ui.txtPageCount = byID(‘txtPageCount‘);
36 ui.pageBox = byID(‘pageBox‘);
37
38 ui.btnSubmit.onclick = function(){
39 var pageIndex = ui.txtPageIndex.value;
40 var pageCount = ui.txtPageCount.value;
41
42 var options = {
43 pageIndex: parseInt(pageIndex),
44 pageCount: parseInt(pageCount),
45 container: ui.pageBox
46 };
47
48 if(options.pageCount > 0){
49 var page = new pagination(options);
50 page.init();
51 }else{
52 alert(‘总页数不能小于0‘);
53 }
54
55 };
56
57 function pagination(options){
58 this.pageIndex = options.pageIndex || 1;
59 this.pageCount = options.pageCount;
60 this.showPage = options.showPage || 3;
61 this.container = options.container;
62 }
63
64 pagination.prototype = {
65 init: function(){
66 /*初始化检查当前页是否合理*/
67 this.pageIndex = this.pageIndex < 1 ? 1 : this.pageIndex;
68 this.pageIndex = this.pageIndex > this.pageCount ? this.pageCount : this.pageIndex;
69
70 /*渲染UI*/
71 this.render();
72 },
73 render: function(){
74 var pageList, setting;
75
76 pageList = [];
77 setting = this.getSetting(this.pageIndex);
78 pageList.push(‘<ul class="pagination">‘);
79
80 if(this.pageIndex > 1){
81 pageList.push(‘<li><button value="‘ + setting.prev + ‘">上一页</button></li>‘);
82
83 if(setting.start > 1){
84 pageList.push(‘<li><button value="1">1</button></li>‘);
85 }
86
87 if(setting.start > 2){
88 pageList.push(‘<li>...</li>‘);
89 }
90 }else{
91 pageList.push(‘<li><button value="1" disabled="disabled">上一页</button></li>‘);
92 }
93
94 for (var i = setting.start; i <= setting.end; i++) {
95 if(i == this.pageIndex){
96 pageList.push(‘<li><button value="‘ + i + ‘" disabled="disabled">‘ + i + ‘</button></li>‘);
97 }else{
98 pageList.push(‘<li><button value="‘ + i + ‘">‘ + i + ‘</button></li>‘);
99 }
100 };
101
102 if(this.pageIndex < this.pageCount){
103 if(setting.end < this.pageCount){
104 if(setting.end < (this.pageCount - 1)){
105 pageList.push(‘<li>...</li>‘);
106 }
107
108 pageList.push(‘<li><button value="‘ + this.pageCount + ‘">‘ + this.pageCount + ‘</button></li>‘);
109 }
110
111 pageList.push(‘<li><button value="‘ + setting.next + ‘">下一页</button></li>‘);
112 }else{
113 pageList.push(‘<li><button value="‘ + this.pageCount + ‘" disabled="disabled">下一页</button></li>‘);
114 }
115
116 pageList.push(‘</ul>‘);
117 this.container.innerHTML = pageList.join(‘\n‘);
118 this.regEvent();
119 },
120 regEvent: function(){
121 /*事件注册*/
122 var _this = this;
123 var button = this.container.getElementsByTagName(‘button‘);
124
125 for(var i = 0; i < button.length; i++){
126 button[i].onclick = function(){
127 _this.change(parseInt(this.value));
128 };
129 }
130 },
131 change: function(index){
132 /*当前页改变时触发*/
133 this.pageIndex = index;
134 this.render();
135 this.onChange(index);
136 },
137 getSetting: function(index){
138 var start, end, prev, next, s, e;
139
140 s = 0;
141 e = 0;
142
143 start = index - this.showPage;
144 end = index + this.showPage;
145
146 if(start < 1){
147 s = Math.abs(start) + 1;
148 start = 1;
149 }
150
151 if(end > this.pageCount){
152 e = end - this.pageCount;
153 end = this.pageCount;
154 }
155
156 if(s > 0 && e <= 0){
157 e = s + end;
158 end = e > this.pageCount ? this.pageCount : e;
159 }else if(e > 0 && s <= 0){
160 s = start - e;
161 start = s < 1 ? 1: s;
162 }
163
164 prev = index > start ? index - 1 : 1;
165 next = index < end ? index + 1 : end;
166
167 /*核心算法, 根据当前页计算出显示的起始页和截止页, 上一页, 下一页 这些数据*/
168 return {start: start, end: end, prev: prev, next: next};
169 },
170 onChange: function(index){
171 /*空函数, 可覆盖*/
172 console.log(index);
173 }
174 };
175
176
177
178 </script>
179 </body>
180 </html>
时间： 2024-10-11 04:21:41