html分页

1.CSS

 1 /*
 2  * 页数按钮样式
 3  */
 4 .page_div span:nth-of-type(2){
 5     float: right;    
 6 }
 7 .page_div a:last-child{
 8     margin-right: 0;
 9 }
10 .page{
11     padding-right: 21px;
12 }
13 .page_div a {
14     min-width: 30px;
15     height: 28px;
16     border: 1px solid #a6acb7;
17     text-align: center;
18     margin: 0 3px;
19     cursor: pointer;
20     line-height: 28px;
21     color: #000;
22     font-size: 13px;
23     display: inline-block;
24     background: #fff;
25 }
26 
27 .page_div .current {
28     color: #FFFFFF;
29     border: none !important;
30     background-color: #44884f;
31 
32 }
33 .page_div .current:hover{
34 color: #FFFFFF;
35     border: none !important;
36     background-color: #44884f;
37 }
38 .totalPages {
39     margin: 0 10px;
40 }
41 
42 .totalPages span,
43 .totalSize span {
44     color: #0073A9;
45     margin: 0 5px;
46 }
47 
48 /*end分页引用外部样式*/

View Code

2.HTML

1 <div class="p_pager">
2                                 <p class="page_div" id="page">
3                                 
4                                 </p>
5                             </div>

3.JS

  1 (function($, window, document, undefined) {
  2     //定义分页类
  3     function Paging(element, options) {
  4         this.element = element;
  5         //传入形参
  6         this.options = {
  7             pageNo: options.pageNo||1,
  8             totalPage: options.totalPage,
  9             totalSize:options.totalSize,
 10             callback:options.callback
 11         };
 12         //根据形参初始化分页html和css代码
 13         this.init();
 14     }
 15     //对Paging的实例对象添加公共的属性和方法
 16     Paging.prototype = {
 17         constructor: Paging,
 18         init: function() {
 19             this.creatHtml();
 20             this.bindEvent();
 21             this.pageBtnHover();
 22         },
 23         //分页翻页按钮hover效果
 24         pageBtnHover: function () {
 25             $("#nextPage")
 26                 .on("mouseout",
 27                 function () {
 28                     $(this).find("img").attr("src", "/img/rightButtonPage.png");
 29                 });
 30             $("#prePage")
 31                 .on("mouseout",
 32                 function () {
 33                     $(this).find("img").attr("src", "/img/leftButtonPage.png");
 34                 });
 35             $("#nextPage")
 36                 .on("mouseover",
 37                 function () {
 38                     $(this).find("img").attr("src", "/img/pa_right_per.png");
 39                 });
 40             $("#prePage")
 41                 .on("mouseover",
 42                 function () {
 43                     $(this).find("img").attr("src", "/img/pa_left_per.png");
 44                 });
 45         },
 46         creatHtml: function () {
 47              
 48             var me = this;
 49             var content = "";
 50             var current = me.options.pageNo;
 51             var total = me.options.totalPage;
 52             var totalNum = me.options.totalSize;
 53             content += "<span>显示&nbsp;<select id='selectPage'><option>10</option><option>25</option><option>50</option><option>100</option></select>&nbsp;项结果<span class='page'></span>显示第1至" + totalNum+"项结果，共"+total+"页</span>";
 54             content += "<span><a id='prePage'><img src='/img/leftButtonPage.png'></a>";
 55 
 56             //总页数大于6时候
 57             if(total > 6) {
 58                 //当前页数小于5时显示省略号
 59                 if(current < 5) {
 60                     for(var i = 1; i < 6; i++) {
 61                         if(current == i) {
 62                             content += "<a class='current'>" + i + "</a>";
 63                         } else {
 64                             content += "<a>" + i + "</a>";
 65                         }
 66                     }
 67                     content += ". . .";
 68                     content += "<a>"+total+"</a>";
 69                 } else {
 70                      //判断页码在末尾的时候
 71                     if(current < total - 3) {
 72                         for(var i = current - 2; i < current + 3; i++) {
 73                             if(current == i) {
 74                                 content += "<a class='current'>" + i + "</a>";
 75                             } else {
 76                                 content += "<a>" + i + "</a>";
 77                             }
 78                         }
 79                         content += ". . .";
 80                         content += "<a>"+total+"</a>";
 81                     //页码在中间部分时候    
 82                     } else {
 83                         content += "<a>1</a>";
 84                         content += ". . .";
 85                         for(var i = total - 4; i < total + 1; i++) {
 86                             if(current == i) {
 87                                 content += "<a class='current'>" + i + "</a>";
 88                             } else {
 89                                 content += "<a>" + i + "</a>";
 90                             }
 91                         }
 92                     }
 93                 }
 94                 //页面总数小于6的时候
 95             } else {
 96                 for(var i = 1; i < total + 1; i++) {
 97                     if(current == i) {
 98                         content += "<a class='current'>" + i + "</a>";
 99                     } else {
100                         content += "<a>" + i + "</a>";
101                     }
102                 }
103             }
104             content += "<a id='nextPage'><img src='/img/rightButtonPage.png'></a></span>";    
105             me.element.html(content);
106         },
107         //添加页面操作事件
108         bindEvent: function() {
109             var me = this;
110             me.element.off('click', 'a');
111             me.element.on('click', 'a', function() {
112                 var num = $(this).html();
113                 var id=$(this).attr("id");
114                 if(id == "prePage") {
115                     if(me.options.pageNo == 1) {
116                         me.options.pageNo = 1;
117                     } else {
118                         me.options.pageNo = +me.options.pageNo - 1;
119                     }
120                 } else if(id == "nextPage") {
121                     if(me.options.pageNo == me.options.totalPage) {
122                         me.options.pageNo = me.options.totalPage
123                     } else {
124                         me.options.pageNo = +me.options.pageNo + 1;
125                     }
126 
127                 } else if(id =="lastPage") {
128                     me.options.pageNo = me.options.totalPage;
129                 }else{
130                     me.options.pageNo = +num;
131                 }
132                 me.creatHtml();
133                 if(me.options.callback) {
134                     me.options.callback(me.options.pageNo);
135                 }
136             });
137         }
138     };
139     //通过jQuery对象初始化分页对象
140     $.fn.paging = function(options) {
141         return new Paging($(this), options);
142     }
143 })(jQuery, window, document);

View Code

4.调用

 1 (function ($, window, document, undefined) {
 2     $.extend({
 3         pageTest: function (options) {
 4             var settings = {
 5                 row: 10,
 6             };
 7             getData();
 8             function getData() {
 9                 //调用接口获取数据
10                 //....
11                 //显示分页
12                 showPage();
13             }
14            
15             function showPage(pageNo, total) {
16                 var totalPage = Math.ceil(total / settings.row);
17                 $("#page").paging({
18                     pageNo: pageNo,
19                     totalPage: totalPage,
20                     totalSize: total,
21                     callback: function (num) {
22                         settings.page = num;
23                         //调用接口获取数据
24                         getData();
25                     }
26                 });
27                 $("#selectPage").val(settings.row);
28             }
29         }
30     });
31   
32 })(jQuery, window, document);

View Code