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>显示 <select id='selectPage'><option>10</option><option>25</option><option>50</option><option>100</option></select> 项结果<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);
- 热点聚合:html