Pagination component based on jQuery encapsulation

Foreword:

Since the project needed to achieve the paging effect, I searched in the jQuery plug-in library, but I couldn’t find the effect I wanted, so I encapsulated a paging component myself.

Idea:

It is mainly based on the paging template established based on the prototype during initialization and then binds dynamic events to achieve the paging effect of refreshing the 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: 
  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="&#39;+this.settings.inputVal+&#39;">页</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(&#39;跳转的页数：&#39;+jumpVal+&#39;;跳转之前的页数：&#39;+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.Component call

Paging component initialization can be completed through window.pageInit= $.pageInit=pageInit.

The exposed interfaces are:

1.container: DOM container, default.page

2.setPos: HTML position placed by DOM, default body

3.totalPages: Default number of pages, required, default null

4.totalLists: Default total number of data, required, default null

5.initPage: Current page ,Default first page

6.inputVal: Jump page, default first page

7.callBack: Executed callback function, required, default 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?1.1.11"> 7 </head> 8 <body> 9 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js?1.1.11"></script>10 <script src="js/pageInit.js?1.1.11"></script>11 <script>12     $.pageInit(13             {14                 container:'.page',//容器：默认page15                 //setPos:'body',//放置位置：默认body16                 totalPages:10,//总页数：必填17                 totalLists:100,//数据总数：必填18                 initPage:1,//初始页码：默认119                 inputVal:1,//设置跳转的input值：默认120                 //要执行的函数：默认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>

Effect:

Add the function function you need to execute through the callBack interface, and only perform dynamic DOM rendering when true is required.

The above is the detailed content of Pagination component based on jQuery encapsulation. For more information, please follow other related articles on the PHP Chinese website!