這篇文章主要介紹了pageGroup.js怎么實現(xiàn)分頁功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出伊犁免費做網(wǎng)站回饋大家。

pageGroup.js實現(xiàn)分頁功能的具體代碼如下

1.html頁面

引入

<link rel="stylesheet" type="text/css" href="/stylesheets/pageGroup.css" >
<script src="/javascripts/web/pageGroup.js" type="text/javascript"></script>

<div id="pageGro" class="cb">
 {{if maxPage>0}}//總頁數(shù)
 <div class="pageUp">上一頁</div>
 <div class="pageList">
 <ul>
 </ul>
</div>
 <div class="pageDown">下一頁</div>{{/if}}
 <div id="countPage" >{{maxPage}}</div>//總頁數(shù)
 <div id="nowPage" >{{page}}</div>//當(dāng)前頁
 <div id="title" >{{title}}</div>//標題
</div>

2.pageGroup.css

/* CSS Document */
/*分頁*/
#pageGro{ width:400px; height:25px; margin:0px auto; padding-top:30px;}
#pageGro div,#pageGro div ul li{ font-size:12px; color:#999; line-height:23px; float:left; margin-left:5px;}
#pageGro div ul li{ width:22px; text-align:center; border:1px solid #999; cursor:pointer;}
#pageGro div ul li.on{ color:#fff; background:#3c90d9; border:1px solid #3c90d9;}
#pageGro .pageUp,#pageGro .pageDown{ width:63px; border:1px solid #999; cursor:pointer;}
#pageGro .pageUp{ text-indent:23px; background:url(/images/pageUp.png) 5px 7px no-repeat;}
#pageGro .pageDown{ text-indent:5px; background:url(/images/pageDown.png) 46px 6px no-repeat;}

3.pageGroup.js

// JavaScript Document
$(function(){
 //根據(jù)總頁數(shù)判斷，如果小于5頁，則顯示所有頁數(shù)，如果大于5頁，則顯示5頁。根據(jù)當(dāng)前點擊的頁數(shù)生成
 var maxPage=jQuery("#countPage").text();
 var nowPage=jQuery("#nowPage").text();
 var index=parseInt(nowPage);//當(dāng)前頁
 var title=jQuery("#title").text();
 var pageCount =parseInt(maxPage) ;//模擬后臺總頁數(shù)
 //生成分頁按鈕
 if(pageCount>5){
 page_icon(1,5,0);
 pageGroup(index,pageCount);
 }else{
 //alert("66");
 page_icon(1,pageCount,0);
 pageGroup(index,pageCount);
 }

 //點擊分頁按鈕觸發(fā)
 $("#pageGro li").live("click",function(){
 if(pageCount > 5){
 var pageNum = parseInt($(this).html());//獲取當(dāng)前頁數(shù)
 window.location.href = "/article/search/"+title+"/"+pageNum;
 pageGroup(pageNum,pageCount);
 }else{
 var indexpage=jQuery(this).text();
 window.location.href = "/article/search/"+title+"/"+indexpage;
 $(this).addClass("on");
 $(this).siblings("li").removeClass("on");
 }
 });

 //點擊上一頁觸發(fā)
 $("#pageGro .pageUp").click(function(){
 if(pageCount > 5){
 if(index>1){
 window.location.href = "/article/search/"+title+"/"+(index-1);
 }
 }else{
 if(index > 1){
 window.location.href = "/article/search/"+title+"/"+(index-1);
 $("#pageGro li").removeClass("on");//清除所有選中
 }
 }
 });

 //點擊下一頁觸發(fā)
 $("#pageGro .pageDown").click(function(){
 if(pageCount > 5){
 if(nowPage<pageCount){
 window.location.href = "/article/search/"+title+"/"+(index+1);
 }
 }else{
 if(index< pageCount){
 window.location.href = "/article/search/"+title+"/"+(index+1);
 $("#pageGro li").removeClass("on");//清除所有選中
 }
 }
 });
});

//點擊跳轉(zhuǎn)頁面
function pageGroup(pageNum,pageCount){
 if(pageCount>5){
 switch(pageNum){
 case 1:
 page_icon(1,5,0);
 break;
 case 2:
 page_icon(1,5,1);
 break;
 case pageCount-1:
 page_icon(pageCount-4,pageCount,3);
 break;
 case pageCount:
 page_icon(pageCount-4,pageCount,4);
 break;
 default:
 page_icon(pageNum-2,pageNum+2,2);
 break;
 }
 }
 if(pageCount<5){
 switch(pageNum){
 case 1:
 page_icon(1,pageCount,0);
 break;
 case 2:
 page_icon(1,pageCount,1);
 break;
 case pageCount-1:
 page_icon(1,pageCount,2);
 break;
 case pageCount:
 page_icon(1,pageCount,3);
 break;
 }
 }
 if(pageCount==5){
 switch(pageNum){
 case 1:
 page_icon(1,pageCount,0);
 break;
 case 2:
 page_icon(1,pageCount,1);
 break;
 case pageCount-1:
 page_icon(1,pageCount,3);
 break;
 case pageCount:
 page_icon(1,pageCount,4);
 break;
 default:
 page_icon(1,pageNum+2,2);
 break;
 }
 }
}

//根據(jù)當(dāng)前選中頁生成頁面點擊按鈕
function page_icon(page,count,eq){
 var ul_html = "";
 for(var i=page; i<=count; i++){
 ul_html += "<li>"+i+"</li>";
 }
 $("#pageGro ul").html(ul_html);
 $("#pageGro ul li").eq(eq).addClass("on");
}

//上一頁
function pageUp(pageNum,pageCount){
 switch(pageNum){
 case 1:
 break;
 case 2:
 page_icon(1,5,0);
 break;
 case pageCount-1:
 page_icon(pageCount-4,pageCount,2);
 break;
 case pageCount:
 page_icon(pageCount-4,pageCount,3);
 break;
 default:
 page_icon(pageNum-2,pageNum+2,1);
 break;
 }
}

//下一頁
function pageDown(pageNum,pageCount){
 switch(pageNum){
 case 1:
 page_icon(1,5,1);
 break;
 case 2:
 page_icon(1,5,2);
 break;
 case pageCount-1:
 page_icon(pageCount-4,pageCount,4);
 break;
 case pageCount:
 break;
 default:
 page_icon(pageNum-2,pageNum+2,3);
 break;
 }
}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“pageGroup.js怎么實現(xiàn)分頁功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

新聞標題：pageGroup.js怎么實現(xiàn)分頁功能
鏈接分享：http://jinyejixie.com/article44/jjhihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、定制網(wǎng)站、企業(yè)建站、、網(wǎng)站內(nèi)鏈、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)