本文執行個體為大家分享了JQuery的Pager分頁器的具體實現代碼，供大家參考，具體內容如下
效果圖：
代碼：
html代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分頁器</title> <link href="pager.css" rel="stylesheet"/></head><body> <div id="pager"></div> <script src="pager.js"></script> <script> function doChangePage(obj){ //TO DO } var pagerBox = document.getElementById('pager'); var pager = new Pager({ index: 1, total: 15, parent: pagerBox, onchange: doChangePage }); </script></body></html>
css代碼：
.pager-box:after{ display:block; height:0; visibility:hidden; clear:both; content:'';}.pager{ float:left; position:relative; left:50%; font-family:微軟雅黑;}.pager a,.pager span{ position:relative; left:-50%; display:block; float:left; margin-left:5px; border:1px solid #b6bcc1; padding: 5px 10px; text-decoration:none; color:#b6bcc1; border-radius:3px;}.pager span{ border:0;}.pager a.js-selected{ background:#b6bcc1; color:#fff; cursor:default;}.pager a.js-disabled{ background:#f1f1f1; border-color:#f1f1f1; cursor:default; color:#fff;}
pager.js代碼
(function(window, undefined){ /** * 建立元素節點並返回 */ function create(tagName, className, parent){ var element = document.createElement(tagName); element.className = className; parent.appendChild(element); return element; } /** * 數組消除重複 */ function clearRepeat(arr){ var obj = {}, result = []; for(var i = 0, len = arr.length; i < len; i++){ obj[arr[i]] = 1; } for(var i in obj){ result.push(i); } return result; } /** * 添加類名 */ function addClassName(element, className){ var aClass = element.className.split(' '); aClass.push(className); aClass = clearRepeat(aClass); element.className = aClass.join(' '); } /** * 刪除類名 */ function delClassName(element, className){ var aClass = element.className.split(' '), index = aClass.indexOf(className); if(index > 0) aClass.splice(index, 1); element.className = aClass.join(' '); } /** * 檢查是否含有類名 * @param element * @param className * @returns {boolean} */ function hasClassName(element, className){ var aClass = element.className.split(' '), index = aClass.indexOf(className); if(index > 0) return true; return false; } var Pager = function(obj){ this.__total = obj.total || 1; this.__index = obj.index || 1; this.__parent = obj.parent; this.__onchange = obj.onchange; //初始化分頁器 this.__init(obj); }; var pro = Pager.prototype; /** * 初始化分頁器 */ pro.__init = function(obj){ if(this.__total < this.__index) return; //儲存數字 this.__numbers = []; //儲存省略符號 this.__dots = []; this.__wrapper = create('div', 'pager-box', this.__parent); this.__body = create('div', 'pager', this.__wrapper); //儲存上一頁 this.__preBtn = create('a', 'prev', this.__body); this.__preBtn.href = 'javascript:void(0);'; this.__preBtn.innerText = (obj.label && obj.label.prev) || '上一頁'; //儲存數字 if(this.__total < 8){ for(var i = 0; i < this.__total; i++){ var t = create('a', 'number', this.__body); t.href = 'javascript:void(0);'; t.innerText = i + 1; this.__numbers.push(t); } }else{ for(var i = 0; i < 2; i++){ var t = create('span', 'dots', this.__body); t.innerText = '...'; this.__dots.push(t); }; for(var i = 0; i < 7; i++){ var t = create('a', 'number', this.__body); t.href = 'javascript:void(0);'; this.__numbers.push(t); } } //儲存下一頁 this.__nextBtn = create('a', 'next', this.__body); this.__nextBtn.href = 'javascript:void(0);'; this.__nextBtn.innerText = (obj.label && obj.label.next) || '下一頁'; // this._$setIndex(this.__index); // this.__body.onclick = this.__doClick.bind(this); }; pro.__doClick = function(e){ var e = e || window.event, target = e.target || e.srcElement; //點擊省略符號 if(target.tagName.toLowerCase() == 'span') return; //點擊了不能點擊的上一頁或者下一頁 if(hasClassName(target, 'js-disabled')) return; //點擊了當前頁 if(hasClassName(target, 'js-selected')) return; if(target == this.__preBtn){ //點擊了上一頁 this._$setIndex(this.__index - 1); }else if(target == this.__nextBtn){ //點擊了下一頁 this._$setIndex(this.__index + 1); }else{ //點擊了數字 var index = target.innerText; this._$setIndex(index); } }; /** * 跳轉頁數 */ pro._$setIndex = function(index){ index = parseInt(index); //更新資訊 if(index != this.__index){ this.__last = this.__index; this.__index = index; } //處理 delClassName(this.__preBtn, 'js-disabled'); delClassName(this.__nextBtn, 'js-disabled'); if(this.__total < 8){ //總頁數小於8的情況 if(this.__last) delClassName(this.__numbers[this.__last - 1], 'js-selected'); addClassName(this.__numbers[this.__index - 1], 'js-selected'); if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled'); if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled'); }else{ this.__dots[0].style.display = 'none'; this.__dots[1].style.display = 'none'; for(var i = 0; i < 7; i++){ delClassName(this.__numbers[i], 'js-selected'); }; if(this.__index < 5){ for(var i = 0; i < 6; i++){ this.__numbers[i].innerText = i + 1; } this.__numbers[6].innerText = this.__total; this.__dots[1].style.display = 'block'; this.__body.insertBefore(this.__dots[1], this.__numbers[6]); addClassName(this.__numbers[this.__index - 1], 'js-selected'); if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled'); }else if(this.__index > this.__total - 4){ for(var i = 1; i < 7; i++){ this.__numbers[i].innerText = this.__total + i -6; } this.__numbers[0].innerText = '1'; this.__dots[0].style.display = 'block'; this.__body.insertBefore(this.__dots[0], this.__numbers[1]); addClassName(this.__numbers[this.__index + 6 - this.__total], 'js-selected'); if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled'); }else{ this.__numbers[0].innerText = '1'; for(var i = 1; i < 6; i++){ this.__numbers[i].innerText = this.__index - 3 + i; if(i == 3) addClassName(this.__numbers[i], 'js-selected'); } this.__numbers[6].innerText = this.__total; this.__dots[0].style.display = 'block'; this.__body.insertBefore(this.__dots[0], this.__numbers[1]); this.__dots[1].style.display = 'block'; this.__body.insertBefore(this.__dots[1], this.__numbers[6]); } } if(typeof this.__onchange == 'function'){ this.__onchange({ index: this.__index, last: this.__last, total: this.__total }) } }; /** * 得到總頁數 */ pro._$getIndex = function(){ return this.__index; }; /** * 得到上一個頁數 */ pro._$getLast = function(){ return this.__last; }; //變成全域 window.Pager = Pager;})(window);
主要思路：
分頁器共分為以下4種情況：
情況1，當total < 8 時，所有的頁碼全部顯示。
情況2，當total >= 8 且 index < 5時，顯示1-6和最後一頁。
情況3，當total >= 8 且 index > total - 4時，顯示1和最後6項。
情況4，當total >= 8 且 5 <= index <= total - 4時，顯示1和最後一頁，和中間5項。
Pager類執行個體化時傳入一個設定對象：
{ parent: element, //給分頁器設定父節點 index: index, //設定當前頁 total: total, //設定總頁數 onchange: function(){} //頁數變化回呼函數}
當我們執行個體化Pager時，執行Pager函數體內的語句，首先賦值，然後就執行初始化函數：
var Pager = function(obj){ //賦值 this.__total = obj.total || 1; this.__index = obj.index || 1; this.__parent = obj.parent; this.__onchange = obj.onchange; //初始化分頁器 this.__init(obj);};
初始化函數this.__init結構：
Pager.prototype.__init = function(obj){ (根據上面分析的情況進行處理) ... this._$setIndex(this.__index); //跳轉到初始頁 //綁定分頁器點擊函數 this.__body.onclick = this.__doClick.bind(this);};
初始化完成，點擊後就會做出相應的判斷，並使用this._$setIndex(index)進行跳轉。
更多關於分頁教程的文章，請查看以下專題：
javascript分頁功能操作
jquery分頁功能操作
php分頁功能操作
ASP.NET分頁功能操作
下載：paper
以上就是本文的全部內容，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
