学习JS大半年之久，第一次自己尝试写一些小插件，写法参考网上某位牛人写代码的思路。
此处代码写的是静态分页。如果需动态分页，还可以修改下。第一次写，还有很多地方可以优化。希望各位大牛踊跃拍砖。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
5 <title> pager demo </title>
6 <meta name="author" content="rainna" />
7 <meta name="keywords" content="rainna‘s js lib" />
8 <meta name="description" content="pager demo" />
9 </head>
10 <style>
11 *{margin:0;padding:0;}
12 li{list-style:none;}
13 .j-curr{color:red;}
14
15 #list,#pager{width:400px;margin:50px auto;text-align:center;line-height:26px;}
16 #list li{border-bottom:1px solid #eee;}
17 #pager li{display:inline-block;padding:0 5px;cursor:pointer;}
18 </style>
19 <body>
20 <div id="list">
21 <ul>
22 <li>01111111</li>
23 <li>0222222</li>
24 <li>0333333</li>
25 <li>0444444</li>
26 <li>0555555</li>
27 <li>0666666</li>
28 <li>0777777</li>
29 <li>0888888</li>
30 <li>0999999</li>
31 <li>10101010</li>
32 <li>11111111</li>
33 <li>12121212</li>
34 <li>13131313</li>
35 <li>14141414</li>
36 <li>15151515</li>
37 <li>16161616</li>
38 <li>17171717</li>
39 <li>18181818</li>
40 <li>19191919</li>
41 <li>20202020</li>
42 <li>01111111</li>
43 <li>0222222</li>
44 <li>0333333</li>
45 <li>0444444</li>
46 <li>0555555</li>
47 </ul>
48 </div>
49 <div id="pager"></div>
50
51 <script>
52 var pager = function(){
53 //公共函数
54 function T$(id){
55 return document.getElementById(id);
56 }
57 function T$$(root,tag){
58 return (root || document).getElementsByTagName(tag);
59 }
60 function $extend(object1,object2){
61 for(var p in object2){
62 object1[p] = object2[p];
63 }
64 return object1;
65 }
66 function $each(arr, callback, thisp) {
67 if (arr.forEach){
68 arr.forEach(callback, thisp);
69 }else{
70 for(var i = 0, len = arr.length; i < len; i++){
71 callback.call(thisp, arr[i], i, arr);
72 }
73 }
74 }
75
76 //默认参数配置
77 var defaultOptions = {
78 elemShowCount:5, //每页显示条数，默认为5条
79 pageShowCount:4, //显示的页码数目，默认显示4个页码
80 showFirstPageBtnAndLastPageBtn:true, //是否显示首页，尾页，默认显示
81 showPrevBtnAndNextBtn:true, //是否显示上一页，下一页，默认显示
82 showPageNumTips:true, //是否显示【1/7页】页面提示，默认显示
83 showPageNum:true //是否显示分页的数字，默认显示
84 };
85
86 //主类构造函数 参数说明：bid为元素容器div的ID,pid为分页容器div的ID,options为重写的默认配置参数
87 var showPage = function(bid,pid,options){
88 var self = this;
89 if(!(self instanceof showPage)){
90 return new showPage(bid,pid,options);
91 }
92 self.container = T$(bid); //元素容器div
93 self.pagerBox = T$(pid); //翻页容器div
94 if(!self.container){
95 return;
96 }
97 self.options = $extend(defaultOptions,options||{});
98 self.elem = T$$(self.container,‘li‘); //需要分页的元素
99 self.elemTotalCount = self.elem.length || 0; //分页元素的总个数
100 self.pageTotalCount = Math.ceil(self.elemTotalCount/self.options.elemShowCount) || 0; //总页数
101 };
102
103 showPage.prototype = {
104 constructor:showPage,
105 //显示当页的元素内容，参数currPageNum为当前页码，从0开始
106 showChangeElemCont: function(currPageNum){
107 var self = this; //this为showPage对象
108 var nextPageCount = (currPageNum+1)*self.options.elemShowCount < self.elemTotalCount ? (currPageNum+1)*self.options.elemShowCount : self.elemTotalCount; //判断为最后一页时，最后一页应该显示的数据条数
109 for(var i=0;i<self.elemTotalCount;i++){
110 self.elem[i].style.display = ‘none‘;
111 }
112 for(var i=currPageNum*self.options.elemShowCount,l=nextPageCount;i<l;i++){
113 self.elem[i].style.display = ‘block‘;
114 }
115 },
116 //显示当页的页码内容，参数currPageNum为当前页码，从0开始
117 showChangePageCont: function(currPageNum){
118 var self = this; //this为showPage对象
119 var firstPageHtml = prevPageHtml = pageLinkHtml = nextPageHtml = lastPageHtml = pageTips = ‘‘; //firstPageHtml:首页 prevPageHtml:上一页 pageLinkHtml:页码表 nextPageHtml:下一页 lastPageHtml:尾页 pageTips:页码提示
120 var startPage,endPage; //startPage:页码列表中的第一页 endPage:页码列表中的最后一页
121 var pageShowMidCount = Math.ceil(self.options.pageShowCount/2); //页码中间值，当超过这个值时，页码列表发生变化
122 if(self.pageTotalCount <= self.options.pageShowCount){ //总页码数小于等于默认要显示的页码数时，直接在当前页面显示全部的页码
123 startPage = 0;
124 endPage = self.pageTotalCount-1;
125 }else{
126 if(self.options.pageShowCount%2 == 0){
127 if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
128 startPage = 0;
129 endPage = self.options.pageShowCount-1;
130 }else if((currPageNum + 1 + pageShowMidCount) >= self.pageTotalCount){ //尾页
131 startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
132 endPage = self.pageTotalCount-1;
133 }else{
134 startPage = currPageNum - pageShowMidCount + 1;
135 endPage = currPageNum + pageShowMidCount;
136 }
137 }else{
138 if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
139 startPage = 0;
140 endPage = self.options.pageShowCount-1;
141 }else if((currPageNum + 1 + pageShowMidCount - 1) >= self.pageTotalCount){ //尾页
142 startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
143 endPage = self.pageTotalCount-1;
144 }else{
145 startPage = currPageNum - pageShowMidCount + 1;
146 endPage = currPageNum + pageShowMidCount - 1;
147 }
148 }
149 }
150
151 //显示首页尾页
152 if(self.options.showFirstPageBtnAndLastPageBtn == true){
153 firstPageHtml = ‘<li>首页</li>‘;
154 lastPageHtml = ‘<li>尾页</li>‘;
155 }
156 //显示上一页下一页
157 if(self.options.showPrevBtnAndNextBtn == true){
158 if(currPageNum != 0) prevPageHtml = ‘<li>上一页</li>‘; //首页不显示上一页
159 if(currPageNum != self.pageTotalCount-1) nextPageHtml = ‘<li>下一页</li>‘; //尾页不显示最后一页
160 }
161 //显示页码数字链接
162 for(var i=startPage,l=endPage;i<=l;i++){
163 if(currPageNum==i){
164 pageLinkHtml += ‘<li class="j-curr">‘ + (i+1) + ‘</li>‘;
165 }else{
166 pageLinkHtml += ‘<li>‘ + (i+1) + ‘</li>‘;
167 }
168 }
169 //显示页码提示信息
170 if(self.options.showPageNumTips == true){
171 pageTips = ‘<span>‘ +(currPageNum+1) + ‘/‘ + self.pageTotalCount + ‘</span>‘;
172 }
173 //拼出页码元素的整体内容
174 self.pagerBox.innerHTML = firstPageHtml + prevPageHtml + pageLinkHtml + nextPageHtml + lastPageHtml + pageTips;
175
176 var elems = T$$(self.pagerBox,‘li‘);
177 $each(elems, function(o, i) {
178 o.onclick = function() {
179 if(o.innerText == ‘首页‘){
180 self.showChangeElemCont(0);
181 self.showChangePageCont(0);
182 }else if(o.innerText == ‘尾页‘){
183 self.showChangeElemCont(self.pageTotalCount-1);
184 self.showChangePageCont(self.pageTotalCount-1);
185 }else if(o.innerText == ‘上一页‘){
186 self.showChangeElemCont(currPageNum-1);
187 self.showChangePageCont(currPageNum-1);
188 }else if(o.innerText == ‘下一页‘){
189 self.showChangeElemCont(currPageNum+1);
190 self.showChangePageCont(currPageNum+1);
191 }else{
192 index = parseInt(o.innerText) - 1;
193 self.showChangeElemCont(index);
194 self.showChangePageCont(index);
195 }
196 }
197 });
198 }
199 };
200
201 return{
202 onShowPage:function(bid,pid,options){
203 //调用主类
204 var st = new showPage(bid,pid,options);
205 st.showChangeElemCont(0);
206 st.showChangePageCont(0);
207 }
208 }
209 }();
210
211 pager.onShowPage(‘list‘,‘pager‘,{elemShowCount:4,pageShowCount:5});
212 </script>
213 </body>
214 </html>
JS小插件之1——pager 分页
时间： 2024-11-01 02:09:50