Composant de pagination basé sur l'encapsulation jQuery

Avant-propos :

Étant donné que le projet devait obtenir un effet de pagination, je l'ai recherché dans la bibliothèque de plug-ins jQuery, mais je n'ai pas réussi à trouver l'effet que je voulais, alors j'ai j'ai moi-même encapsulé un composant de pagination.

Idée :

Principalement basé sur le modèle de pagination établi par le prototype lors de l'initialisation, puis liant des événements dynamiques pour obtenir l'effet de pagination consistant à actualiser le 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. Le composant appelle

via window.pageInit= $.pageInit=pageInit pour terminer l'initialisation du composant de pagination.

Les interfaces exposées sont :

1.container : conteneur DOM, default.page

2.setPos : position HTML placée par DOM, corps par défaut

3.totalPages : nombre de pages par défaut, requis, null par défaut

4.totalLists : nombre total de données par défaut, requis, null par défaut

5.initPage : page actuelle, première page par défaut

6.inputVal : page de saut, première page par défaut

7.callBack : fonction de rappel exécutée, obligatoire, null par défaut

 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>

Effet :

Ajoutez les fonctions que vous devez exécuter via l'interface de rappel, et le rendu DOM dynamique ne sera exécuté que lorsque true est requis.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!