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>显示 <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.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);
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);
