基于JS分頁控件實(shí)現(xiàn)簡單美觀仿淘寶分頁按鈕效果
更新時(shí)間：2016年11月07日 10:14:38 作者：l284849736
這篇文章主要介紹了基于JS分頁控件實(shí)現(xiàn)簡單美觀仿淘寶分頁按鈕效果的相關(guān)資料,非常不錯具有參考借鑒價(jià)值，需要的朋友可以參考下
最新版本代碼請移步到https://github.com/pgkk/kkpager
在線測試鏈接：http://pgkk.github.io/kkpager/example/pager_test.html
分頁按鈕思想：
1、少于9頁，全部顯示
2、大于9頁，1、2頁顯示，中間頁碼當(dāng)前頁為中心，前后各留兩個頁碼
附件中有完整例子的壓縮包下載。已更新到最新版本
先看效果圖：
01輸入框焦點(diǎn)效果
02效果
模仿淘寶的分頁按鈕效果控件kkpager JS代碼：
Js代碼
var kkpager = {
//divID
pagerid : 'div_pager',
//當(dāng)前頁碼
pno : 1,
//總頁碼
total : 1,
//總數(shù)據(jù)條數(shù)
totalRecords : 0,
//是否顯示總頁數(shù)
isShowTotalPage : true,
//是否顯示總記錄數(shù)
isShowTotalRecords : true,
//是否顯示頁碼跳轉(zhuǎn)輸入框
isGoPage : true,
//鏈接前部
hrefFormer : '',
//鏈接尾部
hrefLatter : '',
/****鏈接算法****/
getLink : function(n){
//這里的算法適用于比如：
//hrefFormer=http://www.xx.com/news/20131212
//hrefLatter=.html
//那么首頁（第1頁）就是http://www.xx.com/news/20131212.html
//第2頁就是http://www.xx.com/news/20131212_2.html
//第n頁就是http://www.xx.com/news/20131212_n.html
if(n == 1){
return this.hrefFormer + this.hrefLatter;
}else{
return this.hrefFormer + '_' + n + this.hrefLatter;
}
},
//跳轉(zhuǎn)框得到輸入焦點(diǎn)時(shí)
focus_gopage : function (){
var btnGo = $('#btn_go');
$('#btn_go_input').attr('hideFocus',true);
btnGo.show();
btnGo.css('left','0px');
$('#go_page_wrap').css('border-color','#6694E3');
btnGo.animate({left: '+=44'}, 50,function(){
//$('#go_page_wrap').css('width','88px');
});
},
//跳轉(zhuǎn)框失去輸入焦點(diǎn)時(shí)
blur_gopage : function(){
setTimeout(function(){
var btnGo = $('#btn_go');
//$('#go_page_wrap').css('width','44px');
btnGo.animate({
left: '-=44'
}, 100, function() {
$('#btn_go').css('left','0px');
$('#btn_go').hide();
$('#go_page_wrap').css('border-color','#DFDFDF');
});
},400);
},
//跳轉(zhuǎn)框頁面跳轉(zhuǎn)
gopage : function(){
var str_page = $("#btn_go_input").val();
if(isNaN(str_page)){
$("#btn_go_input").val(this.next);
return;
}
var n = parseInt(str_page);
if(n < 1 || n >this.total){
$("#btn_go_input").val(this.next);
return;
}
//這里可以按需改window.open
window.location = this.getLink(n);
},
//分頁按鈕控件初始化
init : function(config){
//賦值
this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno);
this.total = isNaN(config.total) ? 1 : parseInt(config.total);
this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords);
if(config.pagerid){this.pagerid = config.pagerid;}
if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;}
if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;}
if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;}
this.hrefFormer = config.hrefFormer || '';
this.hrefLatter = config.hrefLatter || '';
if(config.getLink && typeof(config.getLink) == 'function'){this.getLink = config.getLink;}
//驗(yàn)證
if(this.pno < 1) this.pno = 1;
this.total = (this.total <= 1) ? 1: this.total;
if(this.pno > this.total) this.pno = this.total;
this.prv = (this.pno<=2) ? 1 : (this.pno-1);
this.next = (this.pno >= this.total-1) ? this.total : (this.pno + 1);
this.hasPrv = (this.pno > 1);
this.hasNext = (this.pno < this.total);
this.inited = true;
},
//生成分頁控件Html
generPageHtml : function(){
if(!this.inited){
return;
}
var str_prv='',str_next='';
if(this.hasPrv){
str_prv = '<a href="'+this.getLink(this.prv)+'" title="上一頁">上一頁</a>';
}else{
str_prv = '<span class="disabled">上一頁</span>';
}
if(this.hasNext){
str_next = '<a href="'+this.getLink(this.next)+'" title="下一頁">下一頁</a>';
}else{
str_next = '<span class="disabled">下一頁</span>';
}
var str = '';
var dot = '<span>...</span>';
var total_info='';
if(this.isShowTotalPage || this.isShowTotalRecords){
total_info = '<span class="normalsize">共';
if(this.isShowTotalPage){
total_info += this.total+'頁';
if(this.isShowTotalRecords){
total_info += ' / ';
}
}
if(this.isShowTotalRecords){
total_info += this.totalRecords+'條數(shù)據(jù)';
}
total_info += '</span>';
}
var gopage_info = '';
if(this.isGoPage){
gopage_info = ' 轉(zhuǎn)到<span id="go_page_wrap" style="display:inline-block;width:44px;height:18px;border:1px solid #DFDFDF;margin:0px 1px;padding:0px;position:relative;left:0px;top:5px;">'+
'<input type="button" id="btn_go" onclick="kkpager.gopage();" style="width:44px;height:20px;line-height:20px;padding:0px;font-family:arial,宋體,sans-serif;text-align:center;border:0px;background-color:#0063DC;color:#FFF;position:absolute;left:0px;top:-1px;display:none;" value="確定" />'+
'<input type="text" id="btn_go_input" onfocus="kkpager.focus_gopage()" onkeypress="if(event.keyCode<48 || event.keyCode>57)return false;" onblur="kkpager.blur_gopage()" style="width:42px;height:16px;text-align:center;border:0px;position:absolute;left:0px;top:0px;outline:none;" value="'+this.next+'" /></span>頁';
}
//分頁處理
if(this.total <= 8){
for(var i=1;i<=this.total;i++){
if(this.pno == i){
str += '<span class="curr">'+i+'</span>';
}else{
str += '<a href="'+this.getLink(i)+'" title="第'+i+'頁">'+i+'</a>';
}
}
}else{
if(this.pno <= 5){
for(var i=1;i<=7;i++){
if(this.pno == i){
str += '<span class="curr">'+i+'</span>';
}else{
str += '<a href="'+this.getLink(i)+'" title="第'+i+'頁">'+i+'</a>';
}
}
str += dot;
}else{
str += '<a href="'+this.getLink(1)+'" title="第1頁">1</a>';
str += '<a href="'+this.getLink(2)+'" title="第2頁">2</a>';
str += dot;
var begin = this.pno - 2;
var end = this.pno + 2;
if(end > this.total){
end = this.total;
begin = end - 4;
if(this.pno - begin < 2){
begin = begin-1;
}
}else if(end + 1 == this.total){
end = this.total;
}
for(var i=begin;i<=end;i++){
if(this.pno == i){
str += '<span class="curr">'+i+'</span>';
}else{
str += '<a href="'+this.getLink(i)+'" title="第'+i+'頁">'+i+'</a>';
}
}
if(end != this.total){
str += dot;
}
}
}
str = " "+str_prv + str + str_next + total_info + gopage_info;
$("#"+this.pagerid).html(str);
}
};
html調(diào)用代碼：
Html代碼
<div id="div_pager"></div>
<script type="text/javascript">
//生成分頁控件
kkpager.init({
pno : '${p.pageNo}',
//總頁碼
total : '${p.totalPage}',
//總數(shù)據(jù)條數(shù)
totalRecords : '${p.totalCount}',
//鏈接前部
hrefFormer : '${hrefFormer}',
//鏈接尾部
hrefLatter : '${hrefLatter}'
});
kkpager.generPageHtml();
</script>
以上是示例中是必傳參數(shù)，頁碼、總頁數(shù)、總記錄數(shù)這些是要根據(jù)獲取服務(wù)端pager對象當(dāng)相關(guān)值，還有可選的參數(shù)：pagerid、isShowTotalPage、isShowTotalRecords、isGoPage、getLink
注意鏈接算法喲，以下是默認(rèn)鏈接算法（這個getLink方法也可以作為config參數(shù)）：
Js代碼
/****默認(rèn)鏈接算法****/
getLink : function(n){
//這里的算法適用于比如：
//hrefFormer=http://www.xx.com/news/20131212
//hrefLatter=.html
//那么首頁（第1頁）就是http://www.xx.com/news/20131212.html
//第2頁就是http://www.xx.com/news/20131212_2.html
//第n頁就是http://www.xx.com/news/20131212_n.html
if(n == 1){
return this.hrefFormer + this.hrefLatter;
}else{
return this.hrefFormer + '_' + n + this.hrefLatter;
}
}
CSS代碼：
#div_pager{
clear:both;
height:30px;
line-height:30px;
margin-top:20px;
color:#999999;
}
#div_pager a{
padding:4px 8px;
margin:10px 3px;
font-size:12px;
border:1px solid #DFDFDF;
background-color:#FFF;
color:#9d9d9d;
text-decoration:none;
}
#div_pager span{
padding:4px 8px;
margin:10px 3px;
font-size:14px;
}
#div_pager span.disabled{
padding:4px 8px;
margin:10px 3px;
font-size:12px;
border:1px solid #DFDFDF;
background-color:#FFF;
color:#DFDFDF;
}
#div_pager span.curr{
padding:4px 8px;
margin:10px 3px;
font-size:12px;
border:1px solid #FF6600;
background-color:#FF6600;
color:#FFF;
}
#div_pager a:hover{
background-color:#FFEEE5;
border:1px solid #FF6600;
}
#div_pager span.normalsize{
font-size:12px;
}
效果圖：
1、沒有數(shù)據(jù)或只有一頁數(shù)據(jù)時(shí)效果
2、有多頁時(shí)當(dāng)效果
3、第5頁效果
4、第6頁效果（分頁效果2）
5、第17頁效果（接近尾頁效果）
6、尾頁效果
7、輸入框焦點(diǎn)效果
最后注意，若要使用，使用時(shí)請修改分頁獲取鏈接當(dāng)算法，不然不適用喲
里面輸入框我把ID寫死了，樣式也是寫當(dāng)行內(nèi)樣式，懶得提取出來了，影響不大，各位看官若要用自己再修修，呵呵
以上所述是小編給大家介紹的基于JS分頁控件實(shí)現(xiàn)簡單美觀仿淘寶分頁按鈕效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JS函數(shù)節(jié)流和防抖之間的區(qū)分和實(shí)現(xiàn)詳解
本文主要介紹的是關(guān)于JS中比較常用的函數(shù)：節(jié)流函數(shù)和防抖函數(shù)，從概念、使用場景到代碼簡單實(shí)現(xiàn)做了一個詳細(xì)的區(qū)分。感興趣的小伙伴們可以參考一下2019-01-01
下面小編就為大家?guī)硪黄狫S中位置與大小的獲取方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了web前端開發(fā)upload上傳頭像js示例代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
javascript實(shí)現(xiàn)C語言經(jīng)典程序題
這篇文章主要介紹了javascript實(shí)現(xiàn)C語言經(jīng)典程序題的解題思路，感興趣的小伙伴們可以參考一下2015-11-11
js字符串替換所有的指定字符或文字(推薦replaceAll方法)
要實(shí)現(xiàn)js字符串替換所有的某個字符，推薦大家使用replaceAll方法，默認(rèn)不是所有瀏覽器都兼容，所以這里給出一個解決方案,需要的朋友可以參考下2014-07-07
javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法
下面小編就為大家?guī)硪黄猨avascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
js中數(shù)組結(jié)合字符串實(shí)現(xiàn)查找(屏蔽廣告判斷url等)
這篇文章主要介紹了js中數(shù)組結(jié)合字符串實(shí)現(xiàn)查找(屏蔽廣告判斷url等),需要的朋友可以參考下2016-03-03
這篇文章主要介紹了js如何檢查一個對象是否為空，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要給大家介紹了JS中可能會常用到的一些數(shù)據(jù)處理方法,好多知識寫下來也能加深一下自身的記憶,文中給出了詳細(xì)的實(shí)例代碼,對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09