JS案例之1——pager 分页
学习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>
源码下载：Download
