JQuery的Pager分頁器實現代碼

2019-11-20 10:10:29

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了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

以上就是本文的全部內容，希望對大家的學習有所幫助。

上一篇：基于Bootstrap使用jQuery實現輸入框組input-group的添加與刪除

下一篇：個人網站留言頁面（前端jQuery編寫、后臺php讀寫MySQL）