JQuery的Pager分頁器實現(xiàn)代碼
更新時間：2016年05月03日 11:49:06 作者：康東揚
這篇文章主要為大家詳細介紹了JQuery的Pager分頁器實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JQuery的Pager分頁器的具體實現(xiàn)代碼，供大家參考，具體內(nèi)容如下
效果圖：
代碼：
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){
/**
* 創(chuàng)建元素節(jié)點并返回
*/
function create(tagName, className, parent){
var element = document.createElement(tagName);
element.className = className;
parent.appendChild(element);
return element;
}
/**
* 數(shù)組消除重復
*/
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;
//存儲數(shù)字
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) || '上一頁';
//存儲數(shù)字
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{
//點擊了數(shù)字
var index = target.innerText;
this._$setIndex(index);
}
};
/**
* 跳轉(zhuǎn)頁數(shù)
*/
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){
//總頁數(shù)小于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
})
}
};
/**
* 得到總頁數(shù)
*/
pro._$getIndex = function(){
return this.__index;
};
/**
* 得到上一個頁數(shù)
*/
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類實例化時傳入一個設(shè)置對象：
{
parent: element, //給分頁器設(shè)置父節(jié)點
index: index, //設(shè)置當前頁
total: total, //設(shè)置總頁數(shù)
onchange: function(){} //頁數(shù)變化回調(diào)函數(shù)
}
當我們實例化Pager時，執(zhí)行Pager函數(shù)體內(nèi)的語句，首先賦值，然后就執(zhí)行初始化函數(shù)：
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);
};
初始化函數(shù)this.__init結(jié)構(gòu)：
Pager.prototype.__init = function(obj){
(根據(jù)上面分析的情況進行處理)
...
this._$setIndex(this.__index); //跳轉(zhuǎn)到初始頁
//綁定分頁器點擊函數(shù)
this.__body.onclick = this.__doClick.bind(this);
};
初始化完成，點擊后就會做出相應的判斷，并使用this._$setIndex(index)進行跳轉(zhuǎn)。
更多關(guān)于分頁教程的文章，請查看以下專題：
javascript分頁功能操作
jquery分頁功能操作
php分頁功能操作
ASP.NET分頁功能操作
下載：paper
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)checkbox全選的方法,涉及jQuery操作頁面元素屬性及鼠標事件響應的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jQuery利用cookie 實現(xiàn)本地收藏功能(不重復無需多次命名)
cookie 是存儲于訪問者計算機中的變量。這篇文章主要介紹了jQuery利用cookie 實現(xiàn)本地收藏功能不重復無需多次命名,需要的朋友可以參考下2019-11-11
jQuery實現(xiàn)ctrl+enter（回車）提交表單
本文章來給大家介紹在我們輸入完內(nèi)容之后直接按Ctrl+Enter提交表單實現(xiàn)程序，此方法一般是用于textarea中哦，其它的input這類的就不需了。2015-10-10
萬年歷，想必大家對它都不陌生吧，下面是使用jquery寫的一個萬年歷示例，喜歡的朋友可以參考下2014-01-01
jQuery基于ID調(diào)用指定iframe頁面內(nèi)的方法
這篇文章主要介紹了jQuery基于ID調(diào)用指定iframe頁面內(nèi)的方法,涉及jQuery針對頁面框架元素的選擇與方法的調(diào)用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-07-07
jquery實現(xiàn)動畫菜單的左右滾動、漸變及圖形背景滾動等效果
這篇文章主要介紹了jquery實現(xiàn)動畫菜單的左右滾動、漸變及圖形背景滾動等效果,實例分析了jquery常用的幾種背景動態(tài)變換效果,涉及jquery動態(tài)操作頁面動畫效果實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)
本篇文章主要介紹了jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
jqeury eval將字符串轉(zhuǎn)換json的方法
這個方法是一個將DataTable轉(zhuǎn)換成字符串的方法 。2011-01-01
最近由于項目的需要，需要動態(tài)的添加和刪除table中的tr，感覺用JS可以實現(xiàn)，但是在網(wǎng)上找了一下，單純的自己寫JS，感覺太麻煩，而且也不好維護。于是想到了最近學的jQuery。這篇文章給大家用實例介紹了jQuery動態(tài)添加與刪除tr行的方法，有需要的朋友們可以參考借鑒。2016-10-10
這篇文章主要介紹了JQuery異步獲取返回值中文亂碼的解決方法,除了正常的編碼設(shè)置需要統(tǒng)一外,還要設(shè)置一個setCharacterEncoding才可以避免亂碼,需要的朋友可以參考下2015-01-01