HTML：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title></title> 6 <style> 7 /* 外面盒子样式---自己定义 */ 8 .page_div{margin:20px 10px 20px 0;color:#666} 9 /* 页数按钮样式 */ 10 .page_div button{display:inline-block;min-width:30px;height:28px;cursor:pointer;color:#666;font-size:13px;line-height:28px;background-color:#f9f9f9;border:1px solid #dce0e0;text-align:center;margin:0 4px;-webkit-appearance: none;-moz-appearance: none;appearance: none;} 11 #firstPage,#lastPage,#nextPage,#prePage{width:50px;color:#0073A9;border:1px solid #0073A9} 12 #nextPage,#prePage{width:70px} 13 .page_div .current{background-color:#0073A9;border-color:#0073A9;color:#FFF} 14 /* 页面数量 */ 15 .totalPages{margin:0 10px} 16 .totalPages span,.totalSize span{color:#0073A9;margin:0 5px} 17 /*button禁用*/ 18 .page_div button:disabled{opacity:.5;cursor:no-drop} 19 </style> 20 </head> 21 <body> 22 <div id="page" class="page_div"></div> 23 </body> 24 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 25 <script type="text/javascript" src="pageMe.js"></script> 26 <script> 27 // pageMe.js 使用方法 28 $("#page").paging({ 29 pageNum: 5, // 当前页面 30 totalNum: 14, // 总页码 31 totalList: 300, // 记录总数量 32 callback: function (num) { //回调函数 33 console.log(num); 34 } 35 }); 36 </script> 37 </html>
pageMe.js
1 ;(function ($, window, document, undefined) { 2 'use strict'; 3 function Paging(element, options) { 4 this.element = element; 5 this.options = { 6 pageNum: options.pageNum || 1, // 当前页码 7 totalNum: options.totalNum, // 总页码 8 totalList: options.totalList, // 数据总记录 9 callback: options.callback // 回调函数 10 }; 11 this.init(); 12 } 13 Paging.prototype = { 14 constructor: Paging, 15 init: function () { 16 this.createHtml(); 17 this.bindEvent(); 18 }, 19 createHtml: function () { 20 var me = this; 21 var content = []; 22 var pageNum = me.options.pageNum; 23 var totalNum = me.options.totalNum; 24 var totalList = me.options.totalList; 25 content.push("<button type='button' id='firstPage'>首页</button><button type='button' id='prePage'>上一页</button>"); 26 // 总页数大于6必显示省略号 27 if (totalNum > 6) { 28 // 1、当前页码小于5且总页码大于6 省略号显示后面+总页码 29 if (pageNum < 5) { 30 // 1与6主要看要显示多少个按钮 目前都显示5个 31 for (var i = 1; i < 6; i++) { 32 if (pageNum !== i) { 33 content.push("<button type='button'>" + i + "</button>"); 34 } else { 35 content.push("<button type='button' class='current'>" + i + "</button>"); 36 } 37 } 38 content.push(". . ."); 39 content.push("<button type='button'>" + totalNum + "</button>"); 40 } else { 41 // 2、当前页码接近后面 到最后页码隔3个 省略号显示后面+总页面 42 if (pageNum < totalNum - 3) { 43 for (var i = pageNum - 2; i < pageNum + 3; i++) { 44 if (pageNum !== i) { 45 content.push("<button type='button'>" + i + "</button>"); 46 } else { 47 content.push("<button type='button' class='current'>" + i + "</button>"); 48 } 49 } 50 content.push(". . ."); 51 content.push("<button type='button'>" + totalNum + "</button>"); 52 } else { 53 // 3、页码至少在5，最多在【totalNum - 3】的中间位置 第一页+省略号显示前面 54 content.push("<button type='button'>" + 1 + "</button>"); 55 content.push(". . ."); 56 for (var i = totalNum - 4; i < totalNum + 1; i++) { 57 if (pageNum !== i) { 58 content.push("<button type='button'>" + i + "</button>"); 59 } else { 60 content.push("<button type='button' class='current'>" + i + "</button>"); 61 } 62 } 63 } 64 } 65 } else { 66 // 总页数小于6 67 for (var i = 1; i < totalNum + 1; i++) { 68 if (pageNum !== i) { 69 content.push("<button type='button'>" + i + "</button>"); 70 } else { 71 content.push("<button type='button' class='current'>" + i + "</button>"); 72 } 73 } 74 } 75 content.push("<button type='button' id='lastPage'>尾页</button><button type='button' id='nextPage'>下一页</button>"); 76 content.push("<span class='totalNum'> 共 " + totalNum + " 页 </span>"); 77 content.push("<span class='totalList'> 共 " + totalList + " 条记录 </span>"); 78 me.element.html(content.join('')); 79 80 // DOM重新生成后每次调用是否禁用button 81 setTimeout(function () { 82 me.dis(); 83 }, 20); 84 }, 85 bindEvent: function () { 86 var me = this; 87 me.element.off('click', 'button'); 88 // 委托新生成的dom监听事件 89 me.element.on('click', 'button', function () { 90 var id = $(this).attr('id'); 91 var num = parseInt($(this).html()); 92 var pageNum = me.options.pageNum; 93 if (id === 'prePage') { 94 if (pageNum !== 1) { 95 me.options.pageNum -= 1; 96 } 97 } else if (id === 'nextPage') { 98 if (pageNum !== me.options.totalNum) { 99 me.options.pageNum += 1; 100 } 101 } else if (id === 'firstPage') { 102 if (pageNum !== 1) { 103 me.options.pageNum = 1; 104 } 105 } else if (id === 'lastPage') { 106 if (pageNum !== me.options.totalNum) { 107 me.options.pageNum = me.options.totalNum; 108 } 109 } else { 110 me.options.pageNum = num; 111 } 112 me.createHtml(); 113 if (me.options.callback) { 114 me.options.callback(me.options.pageNum); 115 } 116 }); 117 }, 118 dis: function () { 119 var me = this; 120 var pageNum = me.options.pageNum; 121 var totalNum = me.options.totalNum; 122 if (pageNum === 1) { 123 me.element.children('#firstPage, #prePage').prop('disabled', true); 124 } else if (pageNum === totalNum) { 125 me.element.children('#lastPage, #nextPage').prop('disabled', true); 126 } 127 } 128 }; 129 $.fn.paging = function (options) { 130 return new Paging($(this), options); 131 } 132 })(jQuery, window, document);