pageGroup.js實現(xiàn)分頁功能

更新時間：2019年07月27日 18:09:42 作者：qiupu4667

這篇文章主要為大家詳細介紹了pageGroup.js實現(xiàn)分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了pageGroup.js實現(xiàn)分頁功能的具體代碼，供大家參考，具體內(nèi)容如下

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" style="display:none">{{maxPage}}</div>//總頁數(shù)
 <div id="nowPage" style="display:none">{{page}}</div>//當前頁
 <div id="title" style="display:none">{{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ù)當前點擊的頁數(shù)生成
 var maxPage=jQuery("#countPage").text();
 var nowPage=jQuery("#nowPage").text();
 var index=parseInt(nowPage);//當前頁
 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());//獲取當前頁數(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");//清除所有選中
 }
 }
 });
});

//點擊跳轉頁面
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ù)當前選中頁生成頁面點擊按鈕
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;
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: