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ù)組消除重復(fù)
*/
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);
};
初始化完成，點擊后就會做出相應(yīng)的判斷，并使用this._$setIndex(index)進行跳轉(zhuǎn)。
更多關(guān)于分頁教程的文章，請查看以下專題：
javascript分頁功能操作
jquery分頁功能操作
php分頁功能操作
ASP.NET分頁功能操作
下載：paper
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
利用jquery給指定的table動態(tài)添加一行、刪除一行的方法
下面小編就為大家?guī)硪黄胘query給指定的table動態(tài)添加一行、刪除一行的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery 中msgTips 頂部彈窗效果實現(xiàn)代碼
最近發(fā)現(xiàn)好多網(wǎng)站都采用頂部彈窗，并且不用用戶手動去點擊確定。感覺這樣很方便用戶，下面小編把實現(xiàn)代碼分享給大家，感興趣的的朋友一起看看吧2017-08-08
ASP.NET中使用后端代碼注冊腳本 生成JQUERY-EASYUI的界面錯位的解決方法
上一篇解決了用了JQUERY-EASYUI時 后端注冊腳本重復(fù)執(zhí)行的問題．今天又發(fā)現(xiàn)，通過后端代碼 生成的界面有錯位現(xiàn)象．2010-06-06
JQuery 常用操作代碼，學(xué)習(xí)jquery的朋友可以參考下。2010-03-03
jquery圓形菜單展開收縮效果是基于jquery和css3實現(xiàn)的，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-02-02
本篇文章主要介紹了多個ul中獲取第一個li定位的四種解決方案，需要的朋友可以過來參考下2016-11-11
最近做一個報表頁面顯示位置配置的界面,剛開始時用的是多個checkbox,選擇其中需要的報表即可。后來隨著業(yè)務(wù)變復(fù)雜，需要使用兩個select,選擇其中需要的到右邊select，然后提交到數(shù)據(jù)庫2013-10-10
jQuery鏈式操作如何實現(xiàn)以及為什么要用鏈式操作
jQuery的鏈式操作是如何實現(xiàn)的？為什么要用鏈式操作？接下來會幫助大家解決這兩個問題，感興趣的朋友可以了解下2013-01-01
關(guān)于Jquery中的bind(),on()綁定事件方式總結(jié)
下面小編就為大家?guī)硪黄P(guān)于Jquery中的bind(),on()綁定事件方式總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
通過jQuery方法選中了元素，如何基于這些已經(jīng)選中的元素進行下一步的遍歷呢？下面有個不錯的示例，大家可以參考下2014-05-05