jquery動態(tài)分頁效果堪比時光網(wǎng)
最近一直研究jquery的分頁效果,剛剛弄好了一個,拿出來與大家分享。分頁效果與時光網(wǎng)的差不多。
先在aspx頁面放置一個<div class="pageDivs"></div> ,這個是用來存放分頁的。
然后建一個page.js文件,具體代碼如下(js中用到的css類是自己設(shè)置的,這里就不給出了,具體的大家可以自己設(shè)置一下css樣式):
$(document).ready(function(){
var pageCount=0;//總頁數(shù),在數(shù)據(jù)處理的函數(shù)里設(shè)定
//////////////////////右部按鈕分頁顯示
function right(pageCount,limit,rlimit){
var html="";
if(parseInt(pageCount)-limit>=rlimit){
for(var i=parseInt(pageCount)-rlimit+1; i<=parseInt(pageCount); i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
else{
for(var i=parseInt(limit)+1; i<=pageCount; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
return html;
}
//////////////////////////首頁,尾頁,上一頁,下一頁
function changeState(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//上一頁
var $button2=$("div.pageDivs").find("#Button2");//下一頁
var $first=$("div.pageDivs").find("#First");//首頁
var $last=$("div.pageDivs").find("#Last");//尾頁
if(parseInt(pageIndex)==1){
$first.css("display","none");
$button1.css("display","none");}
else{
$first.css("display","inline");
$button1.css("display","inline");
$first.attr("page",1);
$button1.attr("page",parseInt(pageIndex)-1);}
if(parseInt(pageIndex)==pageCount){
$button2.css("display","none");
$last.css("display","none");}
else{
$last.css("display","inline");
$button2.css("display","inline");
$last.attr("page",pageCount);
$button2.attr("page",parseInt(pageIndex)+1);}
}
////////////////////////////////span動態(tài)分頁 左邊顯示的頁碼個數(shù),右邊顯示的頁碼個數(shù),要求limit>rlimit
function span(pageCount,pageIndex,limit,rlimit){
var isContinue=true;//指示是否繼續(xù)執(zhí)行函數(shù)
var html="<a id='First' href='#' >|<</a><a id='Button1' href='#' ><</a>";
var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//指示分頁碼可以變動的次數(shù)
if(pageCount!=0&&pageCount!=1){
if(pageCount<=limit){
for(var i=1; i<=pageCount; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>"}
}
else{
if(parseInt(pageIndex)<(limit-2)){
for(var i=1; i<=limit; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
html+="...";
html+=right(pageCount,limit,rlimit);
}
else{
if(parseInt(pageIndex)%(limit-2)==0){
if(parseInt(pageIndex)/(limit-2)<=change&&parseInt(pageIndex)-1+parseInt(limit)-1<=parseInt(pageCount)-parseInt(rlimit)){
for(var i=parseInt(pageIndex)-1; i<parseInt(pageIndex)-1+limit; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
html+="...";
html+=right(pageCount,limit,rlimit);
}
else{
for(var i=1; i<=rlimit; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
html+="...";
var rest=parseInt(pageCount)-parseInt(rlimit);
if(rest<limit){
for(var i=parseInt(rlimit)+1; i<=parseInt(pageCount); i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
else{
var start=parseInt(pageCount)-parseInt(limit)+1;
for(var i=start; i<=pageCount; i++){
html+="<a page="+i+" leaf='leaf'>"+i+"</a>";}
}
}
}
else{
html=$("div.pageDivs").html();
$("div.pageDivs").html(html);
isContinue=false;
}
}
}
}
if(isContinue){
html+="<a id='Button2' href='#' >></a><a id='Last' href='#' >>|</a>";
$("div.pageDivs").html(html);}
changeState(pageIndex,pageCount);
$("div.pageDivs").find("a[page=" + parseInt(pageIndex) + "]:visible").removeAttr("href").removeClass("disabled").addClass("current").siblings("a[page:visible").removeClass("current").addClass("disabled").attr("href", "#");
}
function page(pageIndex){
/////////////這里放你具體的數(shù)據(jù)顯示,使用ajax動態(tài)加載處理數(shù)據(jù)
pageCount="通過數(shù)據(jù)處理獲得的頁面總數(shù)";
span(pageCount,pageIndex,7,2);//對分頁效果進行調(diào)用,這里設(shè)置左邊顯示7個頁碼,右邊顯示2個頁碼。
}
//////////////////////////////為頁碼綁定事件
$("div.pageDivs").find("a:visible").live("click",function(){
var result=$(this).attr("page");
if((typeof $(this).attr("leaf"))!= 'undefined'){
$(this).removeAttr("href").removeClass("disabled").addClass("current").siblings().removeClass("current").addClass("disabled").attr("href","#");}
page(result);
});
});
這樣就行了,以上分頁的算法是可以封裝的,與具體的項目沒關(guān)系,可以通用。
相關(guān)文章
jQuery時間插件jquery.clock.js用法實例(5個示例)
這篇文章主要介紹了jQuery時間插件jquery.clock.js用法,結(jié)合5個實例簡單分析了jQuery時間插件jquery.clock.js的具體使用技巧,需要的朋友可以參考下2016-01-01Jquery實現(xiàn)網(wǎng)頁跳轉(zhuǎn)或用命令打開指定網(wǎng)頁的解決方法
本篇文章是對使用Jquery實現(xiàn)網(wǎng)頁跳轉(zhuǎn)或用命令打開指定網(wǎng)頁的解決方法進行了詳細的分析介紹,需要的朋友可以參考下2013-07-07jQuery實現(xiàn)可兼容IE6的滾動監(jiān)聽功能
這篇文章主要介紹了jQuery實現(xiàn)可兼容IE6的滾動監(jiān)聽功能,結(jié)合實例形式分析了jQuery針對不同瀏覽器的事件監(jiān)聽、響應(yīng)及頁面屬性動態(tài)變換相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-09-09jQuery實現(xiàn)的頁面遮罩層功能示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的頁面遮罩層功能,結(jié)合完整實例形式詳細分析了jQuery遮罩層實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-10-10