<div class="page"></div>

.page{width:500px;margin:100px auto;color: #ccc;}.page a{display: inline-block;color: #428bca;height: 25px;line-height: 25px;padding: 0 10px;border: 1px solid #ddd;margin: 0 2px;border-radius: 4px;vertical-align: middle;}.page a:hover{border: 1px solid #428bca;}.page .current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}.page .disabled{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}

// 入口函數 接收參數為擴展插件父級及參數function init(dom, args) { // 如果當前顯示頁數小于總頁數 if (args.current <= args.pageCount) {  // 填充html頁面內容  fillHtml(dom, args);  // 綁定事件  bindEvent(dom, args); } else {  alert('請輸入正確頁數') }}function fillHtml(dom, args) { // 清空dom元素 dom.empty(); //上一頁 if (args.current > 1) {  dom.append('<a href = "#" class="prevPage">上一頁</a>'); } else {  dom.remove('.prevPage');  dom.append('<span class="disabled">上一頁</span>'); } //中間頁數 if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {  dom.append('<a href = "#" class="tcdNumber">' + 1 + '</a>'); } if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {  dom.append('<span>...</span>'); } // 中間頁數利用循環生成 var start = args.current - 2; var end = args.current + 2; for (; start <= end; start++) {  if (start <= args.pageCount && start >= 1) {   if (start != args.current) {    dom.append('<a href = "#" class="tcdNumber">' + start + '</a>');   } else {    dom.append('<span class="current">' + start + '</span>');   }  } } // 判斷臨界值插入省略號 if (args.current + 2 < args.pageCount - 1 && args.pageCount > 5) {  dom.append('<span>...</span>') } // 將中間數值插入html內容中 if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {  dom.append('<a href="#" rel="external nofollow" class="tcdNumber">' + args.pageCount + '</a>'); } //下一頁 根據當前頁數確定按鈕顯示狀態 if (args.current < args.pageCount) {  dom.append('<a href = "#" class="nextPage">下一頁</a>'); } else {  dom.remove('.nextPage');  dom.append('<span class="disabled">下一頁</span>'); }}// 點擊事件 點擊每一頁相當于重新調用fillHtml填入參數 修改當前的顯示值function bindEvent(obj, args) { //點擊頁碼 obj.on('click', '.tcdNumber', function () {  var current = parseInt($(this).text());  changePage(obj, args, current); }) //上一頁 // a.prevPage 規定只能添加到指定的子元素上的事件處理程序 obj.on('click', '.prevPage', function () {  var current = parseInt(obj.children('.current').text());  changePage(obj, args, current - 1); }) //下一頁 obj.on('click', '.nextPage', function () {  var current = parseInt(obj.children('.current').text());  changePage(obj, args, current + 1); })}// 改變html內容function changePage(dom, args, page) { fillHtml(dom, { 'current': page, 'pageCount': args.pageCount }); if (typeof (args.backFn == "function")) {  args.backFn(page); }}// 利用jquery中的extend方法擴展插件 將插件擴展到jquery的原型上 擴展實例插件$.fn.createPage = function (options) { // 拼接參數 即如果調用插件未傳入參數選用默認參數  // 如果傳入參數 利用傳入參數覆蓋默認參數 var args = $.extend({  pageCount: 5,  current: 2,  backFn: function () { } }, options); init(this, args)// 調用入口函數}// 調用插件 傳入參數$('.page').createPage({ pageCount: 13,// 總頁數  current: 3,// 默認選中頁數 // 點擊選中頁數后 回調 backFn: function (p) { }})