首页 > 代码库 > JS案例之1——pager 分页
JS案例之1——pager 分页
原文: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
JS案例之1——pager 分页
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。