Fork me on GitHub

基于jQuery封装的分页组件

 

前言：

由于项目需要实现分页效果，上jQuery插件库找了下，但是木有找到自己想要的效果，于是自己封装了个分页组件。

备注：最新修改会先在GitHub同步：

https://github.com/PCAaron/components

思路：

主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新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渲染。

 

posted @ 2017-06-26 15:01  PC.aaron  阅读(2576)  评论(1)  编辑  收藏  举报