jquery動(dòng)態(tài)分頁(yè)效果堪比時(shí)光網(wǎng)
最近一直研究jquery的分頁(yè)效果,剛剛弄好了一個(gè),拿出來(lái)與大家分享。分頁(yè)效果與時(shí)光網(wǎng)的差不多。
先在aspx頁(yè)面放置一個(gè)<div class="pageDivs"></div> ,這個(gè)是用來(lái)存放分頁(yè)的。
然后建一個(gè)page.js文件,具體代碼如下(js中用到的css類(lèi)是自己設(shè)置的,這里就不給出了,具體的大家可以自己設(shè)置一下css樣式):
$(document).ready(function(){
var pageCount=0;//總頁(yè)數(shù),在數(shù)據(jù)處理的函數(shù)里設(shè)定
//////////////////////右部按鈕分頁(yè)顯示
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;
}
//////////////////////////首頁(yè),尾頁(yè),上一頁(yè),下一頁(yè)
function changeState(pageIndex,pageCount){
var $button1=$("div.pageDivs").find("#Button1");//上一頁(yè)
var $button2=$("div.pageDivs").find("#Button2");//下一頁(yè)
var $first=$("div.pageDivs").find("#First");//首頁(yè)
var $last=$("div.pageDivs").find("#Last");//尾頁(yè)
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動(dòng)態(tài)分頁(yè) 左邊顯示的頁(yè)碼個(gè)數(shù),右邊顯示的頁(yè)碼個(gè)數(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);//指示分頁(yè)碼可以變動(dòng)的次數(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動(dòng)態(tài)加載處理數(shù)據(jù)
pageCount="通過(guò)數(shù)據(jù)處理獲得的頁(yè)面總數(shù)";
span(pageCount,pageIndex,7,2);//對(duì)分頁(yè)效果進(jìn)行調(diào)用,這里設(shè)置左邊顯示7個(gè)頁(yè)碼,右邊顯示2個(gè)頁(yè)碼。
}
//////////////////////////////為頁(yè)碼綁定事件
$("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);
});
});
這樣就行了,以上分頁(yè)的算法是可以封裝的,與具體的項(xiàng)目沒(méi)關(guān)系,可以通用。
- Jquery 分頁(yè)插件之Jquery Pagination
- jQuery實(shí)現(xiàn)仿騰訊視頻列表分頁(yè)效果的方法
- 基于bootstrap3和jquery的分頁(yè)插件
- jQuery插件jPaginate實(shí)現(xiàn)無(wú)刷新分頁(yè)
- jQuery插件pagination實(shí)現(xiàn)分頁(yè)特效
- jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法
- jquery向上向下取整適合分頁(yè)查詢
- 基于Jquery+Ajax+Json實(shí)現(xiàn)分頁(yè)顯示附效果圖
- jQuery實(shí)現(xiàn)帶有洗牌效果的動(dòng)畫(huà)分頁(yè)實(shí)例
相關(guān)文章
jQuery獲取radio選中項(xiàng)的值實(shí)例
本文主要介紹jQuery獲取radio選中項(xiàng)的值的方法,希望能幫到大家,有需要的朋友可以參考一下。2016-06-06
文本溢出插件jquery.dotdotdot.js使用方法詳解
這篇文章主要介紹了文本溢出插件jquery.dotdotdot.js使用方法詳解,需要的朋友可以參考下2017-06-06
Jquery實(shí)現(xiàn)仿騰訊娛樂(lè)頻道焦點(diǎn)圖(幻燈片)特效
這篇文章主要介紹了Jquery實(shí)現(xiàn)仿騰訊娛樂(lè)頻道焦點(diǎn)圖(幻燈片)特效,需要的朋友可以參考下2015-03-03
淺析jQuery Ajax請(qǐng)求參數(shù)和返回?cái)?shù)據(jù)的處理
這篇文章主要介紹了淺析jQuery Ajax請(qǐng)求參數(shù)和返回?cái)?shù)據(jù)的處理的相關(guān)資料,需要的朋友可以參考下2016-02-02
jQuery實(shí)現(xiàn)類(lèi)似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)類(lèi)似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果的方法,實(shí)例分析了jquery隨機(jī)數(shù)及Ajax調(diào)用的相關(guān)技巧,需要的朋友可以參考下2015-08-08
Jquery實(shí)現(xiàn)無(wú)刷新DropDownList聯(lián)動(dòng)實(shí)現(xiàn)代碼
隨著Jquery1.4的發(fā)布,Jquery運(yùn)用越來(lái)越多了,讓我們來(lái)實(shí)現(xiàn)以前經(jīng)常用到的DropDownList無(wú)刷新聯(lián)動(dòng)。2010-03-03
基于jQuery的可用于選項(xiàng)卡及幻燈的切換插件
最近公司項(xiàng)目頁(yè)面中用到選項(xiàng)卡與幻燈比較多,特地寫(xiě)了個(gè)集選項(xiàng)卡、幻燈片與播放控制于一體的插件,同頁(yè)面可多次使用。2011-03-03
jQuery獲取this當(dāng)前對(duì)象子元素對(duì)象的方法
下面小編就為大家?guī)?lái)一篇jQuery獲取this當(dāng)前對(duì)象子元素對(duì)象的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
jquery插件制作 表單驗(yàn)證實(shí)現(xiàn)代碼
今天的內(nèi)容是關(guān)于表單驗(yàn)證插件的制作。表單驗(yàn)證控件實(shí)現(xiàn)的主要功能是,當(dāng)表單提交的時(shí)候檢查必填項(xiàng)是否正確填寫(xiě),同時(shí)根據(jù)需要驗(yàn)證輸入信息是否符合規(guī)范2012-08-08

