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分页引用外部样式*/

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.totalPage123                     } 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);

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);