前言： 由於項目需要實現分頁效果，上jQuery插件庫找了下，但是木有找到自己想要的效果，於是自己封裝了個分頁組件。 思路： 主要是初始化時基於原型建立的分頁模板然後綁定動態事件並實現刷新DOM的分頁效果。 1.page.init.css 2.pageInit.js 3.組件調用 通過 window ...
前言：
由於項目需要實現分頁效果，上jQuery插件庫找了下，但是木有找到自己想要的效果，於是自己封裝了個分頁組件。
思路：
主要是初始化時基於原型建立的分頁模板然後綁定動態事件並實現刷新DOM的分頁效果。
1.page.init.css
1 @charset "utf=8"; 2 *{ 3 box-sizing: border-box; 4 padding: 0; 5 margin: 0; 6 } 7 .page{ 8 font-size: 13px; 9 text-align: right; 10 } 11 .page .page_to{ 12 display: inline-block; 13 max-width: 250px; 14 } 15 .page .page_to li{ 16 display: inline-block; 17 width: auto; 18 height: auto; 19 border: 1px solid #ddd; 20 padding:5px 10px; 21 border-left-width: 0; 22 color: #323232; 23 cursor: pointer; 24 } 25 .page .page_to li.page_hide{ 26 display: none; 27 } 28 .page .page_to li:hover{ 29 color: #32C2CD; 30 background-color: #f4f4f4; 31 border-color: #DDDDDD; 32 } 33 .page .page_to li:first-child{ 34 border-left-width: 1px; 35 } 36 .page .page_jump{ 37 display: inline-block; 38 width: 180px; 39 } 40 .page .page_jump input.page_jump_input{ 41 width: 52px; 42 height: 28px; 43 text-align: center; 44 text-decoration: none; 45 background-color: #fff; 46 border: 1px solid #ddd; 47 margin:0 4px; 48 } 49 .page .page_jump input.page_jump_btn{ 50 display: inline-block; 51 padding: 7px 20px; 52 margin-left: 5px; 53 font-size: 14px; 54 font-weight: 400; 55 line-height: 1.42857143; 56 text-align: center; 57 white-space: nowrap; 58 vertical-align: middle; 59 -ms-touch-action: manipulation; 60 touch-action: manipulation; 61 cursor: pointer; 62 -webkit-user-select: none; 63 -moz-user-select: none; 64 -ms-user-select: none; 65 user-select: none; 66 border: 1px solid transparent; 67 border-radius: 4px; 68 background-color: #00BB9C; 69 color: #FFFFFF; 70 font-weight: bold; 71 }
2.pageInit.js
1 /** 2 * Created: 2017/6/20. 3 * author: Aaron 4 * address: http://www.cnblogs.com/aaron-pan/ 5 */ 6 (function($,window,undefined){ 7 8 var curPage='', 9 //跳轉是否有值 10 jumpVal='', 11 //從DOM中重新獲取數據總數/總頁數 12 lists='', 13 totals='', 14 //是否返回值 15 isTrue=false; 16 17 var Page=function(opts){ 18 this.settings= $.extend({},Page.defaults,opts); 19 curPage=this.settings.initPage; 20 totals=this.settings.totalPages; 21 jumpVal=this.settings.inputVal; 22 this.init(); 23 }; 24 25 //預設配置 26 Page.defaults={ 27 container:'.page', 28 setPos:'body', 29 totalPages:null, 30 totalLists:null, 31 initPage:1, 32 inputVal:1, 33 callBack:null 34 }; 35 36 Page.prototype={ 37 init:function(){ 38 this.create(); 39 }, 40 create:function(){ 41 var _template='<div class="page">'+ 42 '<span class="page_details">'+ 43 '共<span class="page_num">'+this.settings.totalLists+'</span>條記錄，'+ 44 '第<span class="page_current">'+curPage+'</span>/'+ 45 '<span class="page_size">'+this.settings.totalPages+'</span>頁'+ 46 '</span>'+ 47 '<div class="page_to">'+ 48 '<ul class="flex_parent">'+ 49 '<li class="page_first flex_child">首頁</li>'+ 50 '<li class="page_pre page_hide flex_child">« 上一頁</li>'+ 51 '<li class="page_next flex_child">下一頁 »</li>'+ 52 '<li class="page_last flex_child">末頁</li>'+ 53 '</ul>'+ 54 '</div>'+ 55 '<div class="page_jump">'+ 56 '<span>第：<input type="number" class="page_jump_input" value="'+this.settings.inputVal+'">頁</span>'+ 57 '<input type="button" class="page_jump_btn" value="Go">'+ 58 '</div>'+ 59 '</div>'; 60 $(this.settings.setPos).append(_template); 61 this.refreshDom(); 62 this.bindEvent(); 63 }, 64 bindEvent:function(){ 65 var _this=this; 66 //跳轉首頁 67 $(this.settings.container).on("click",".page_first",function(){ 68 69 lists=$(_this.settings.container).find(".page_num").text(); 70 totals=$(_this.settings.container).find(".page_size").text(); 71 72 if($.isFunction(_this.settings.callBack)){ 73 curPage=1; 74 isTrue=_this.settings.callBack(1); 75 if(isTrue){ 76 _this.refreshDom(); 77 $(_this.settings.container).find(".page_current").text(1); 78 $(_this.settings.container).find(".page_jump_input").val(curPage); 79 } 80 } 81 }); 82 //跳轉上一頁 83 $(this.settings.container).on("click",".page_pre",function(){ 84 85 lists=$(_this.settings.container).find(".page_num").text(); 86 totals=$(_this.settings.container).find(".page_size").text(); 87 88 if($.isFunction(_this.settings.callBack)){ 89 if(curPage>1){ 90 curPage=curPage-1; 91 isTrue=_this.settings.callBack(curPage); 92 if(isTrue){ 93 _this.refreshDom(); 94 $(_this.settings.container).find(".page_current").text(curPage); 95 $(_this.settings.container).find(".page_jump_input").val(curPage); 96 } 97 } 98 } 99 }); 100 //跳轉下一頁 101 $(this.settings.container).on("click",".page_next",function(){ 102 103 lists=$(_this.settings.container).find(".page_num").text(); 104 totals=$(_this.settings.container).find(".page_size").text(); 105 106 107 if($.isFunction(_this.settings.callBack)){ 108 if(curPage<totals){ 109 curPage=curPage+1; 110 isTrue=_this.settings.callBack(curPage); 111 if(isTrue){ 112 _this.refreshDom(); 113 $(_this.settings.container).find(".page_current").text(curPage); 114 $(_this.settings.container).find(".page_jump_input").val(curPage); 115 } 116 } 117 } 118 }); 119 //跳轉末頁 120 $(this.settings.container).on("click",".page_last",function(){ 121 122 lists=$(_this.settings.container).find(".page_num").text(); 123 totals=$(_this.settings.container).find(".page_size").text(); 124 125 if($.isFunction(_this.settings.callBack)){ 126 curPage=totals; 127 isTrue=_this.settings.callBack(curPage); 128 if(isTrue){ 129 _this.refreshDom(); 130 $(_this.settings.container).find(".page_current").text(totals); 131 $(_this.settings.container).find(".page_jump_input").val(curPage); 132 } 133 } 134 }); 135 //Go跳轉 136 $(this.settings.container).on("click",".page_jump_btn",function(){ 137 138 lists=$(_this.settings.container).find(".page_num").text(); 139 totals=$(_this.settings.container).find(".page_size").text(); 140 141 if($.isFunction(_this.settings.callBack)){ 142 jumpVal=Number($(_this.settings.container).find("input.page_jump_input").val()); 143 console.log('跳轉的頁數：'+jumpVal+';跳轉之前的頁數：'+curPage); 144 if(jumpVal>=1 && jumpVal <=totals){ 145 curPage=jumpVal; 146 isTrue=_this.settings.callBack(curPage); 147 if(isTrue){ 148 _this.refreshDom(); 149 $(_this.settings.container).find(".page_current").text(curPage); 150 } 151 }else{ 152 jumpVal=curPage; 153 } 154 } 155 }); 156 }, 157 refreshDom:function(){ 158 $(this.settings.container).find("li.flex_child").removeClass("page_hide"); 159 if(Number(totals)==1){ 160 $(this.settings.container).find(".page_pre").addClass("page_hide"); 161 $(this.settings.container).find(".page_next").addClass("page_hide"); 162 } 163 else if(Number(totals)==2){ 164 if(Number(curPage)==1){ 165 $(this.settings.container).find(".page_pre").addClass("page_hide"); 166 }else{ 167 $(this.settings.container).find(".page_next").addClass("page_hide"); 168 } 169 } 170 else if(Number(curPage)==1 && Number(totals)>2){ 171 $(this.settings.container).find(".page_pre").addClass("page_hide"); 172 } 173 else if(Number(curPage)==Number(totals) && Number(totals)>2){ 174 $(this.settings.container).find(".page_next").addClass("page_hide"); 175 } 176 } 177 }; 178 179 var pageInit=function(opts){ 180 return new Page(opts); 181 }; 182 183 window.pageInit= $.pageInit=pageInit; 184 185 })(jQuery,window,undefined);
3.組件調用
通過 window.pageInit= $.pageInit=pageInit 可完成分頁組件初始化。
暴露出來的介面分別為：
1.container：DOM的容器，預設.page
2.setPos：DOM放置的HTML位置，預設body
3.totalPages：預設的頁數，必填，預設null
4.totalLists：預設的數據總數，必填，預設null
5.initPage：當前頁,預設第一頁
6.inputVal：跳轉頁，預設第一頁
7.callBack：執行的回調函數，必填，預設null
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>基於jQuery封裝的分頁組件</title> 6 <link rel="stylesheet" href="css/page.init.css"> 7 </head> 8 <body> 9 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> 10 <script src="js/pageInit.js"></script> 11 <script> 12 $.pageInit( 13 { 14 container:'.page',//容器：預設page 15 //setPos:'body',//放置位置：預設body 16 totalPages:10,//總頁數：必填 17 totalLists:100,//數據總數：必填 18 initPage:1,//初始頁碼：預設1 19 inputVal:1,//設置跳轉的input值：預設1 20 //要執行的函數：預設null，必須為fn且返回true則可執行分頁，false則不執行 21 callBack:function(n){ 22 var flag=true; 23 console.log(n); 24 return flag; 25 } 26 } 27 ); 28 </script> 29 </body> 30 </html>
效果：
通過callBack介面，添加自己所需要執行的function函數，並且需要return true時才回執行動態的DOM渲染。
