您好,登錄后才能下訂單哦!
這段時(shí)間在做公司項(xiàng)目的時(shí)候需要用到ajax進(jìn)行分頁(點(diǎn)擊頁碼也是無刷新的顯示上一頁或下一頁的內(nèi)容,不是一般的選擇跳轉(zhuǎn)),但是在網(wǎng)上找了一下,大部分分頁插件都是直接刷新跳轉(zhuǎn)的,感覺和我的需求差距比較大,就自己動(dòng)手寫了一個(gè)可以實(shí)現(xiàn)自己需要的功能的js來實(shí)現(xiàn)這個(gè)控件,實(shí)現(xiàn)的效果如下:
因?yàn)闃I(yè)務(wù)需要,我需要在一個(gè)頁面創(chuàng)建多個(gè)這樣的頁碼控件(有些是在ajax中生成的),顯然為每一個(gè)控件寫一個(gè)專屬的js是不現(xiàn)實(shí)的,所以,我將公共部分提取出來,然后通過傳入的選擇器不同,對(duì)不同的控件進(jìn)行相應(yīng)方法的調(diào)用。
下面是該控件實(shí)現(xiàn)的js代碼:
// JavaScript Document $(function(){ //點(diǎn)擊分頁按鈕觸發(fā) $("#pageGro li").live("click",function(){ var pageNum = parseInt($(this).html());//獲取當(dāng)前頁數(shù) //獲取當(dāng)前評(píng)價(jià)分類的總頁數(shù) var totalnum = type+""+praise; if(pageCount[parseInt(totalnum)] > 5){ pageGroup(pageNum,pageCount[parseInt(totalnum)]); }else{ $(this).addClass("on"); $(this).siblings("li").removeClass("on"); } loadData(pageNum);//這個(gè)方法里面就是ajax獲取數(shù)據(jù)的代碼,為了讓這個(gè)頁碼控件能夠更通用,我將這個(gè)方法寫在調(diào)用這個(gè)js的php頁面中,這樣使得這個(gè)頁碼控件能應(yīng)用于更多的場景中。 }); //點(diǎn)擊上一頁觸發(fā) $("#pageGro .pageUp").live("click",function(){ var totalnum = type+""+praise; console.log(totalnum); console.log(pageCount); if(pageCount[parseInt(totalnum)] > 5){//初始默認(rèn)顯示1-5頁(若真實(shí)頁碼小于五,則根據(jù)真實(shí)頁碼數(shù)顯示) var pageNum = parseInt($(this).children("li.on").html());//獲取當(dāng)前頁 pageUp(pageNum,pageCount[parseInt(totalnum)]); loadData(pageNum); }else{ var index = $("#pageGro ul li.on").index();//獲取當(dāng)前頁 console.log("index = "+index); if(index > 0){ $(this).next().find("li").removeClass("on");//清除所有選中 $(this).next().find("ul li").eq(index-1).addClass("on");//選中上一頁 loadData(index); } } }); //點(diǎn)擊下一頁觸發(fā) $("#pageGro .pageDown").live("click",function(){ var totalnum = type+""+praise; console.log(totalnum); console.log(pageCount[parseInt(totalnum)]); if(pageCount[parseInt(totalnum)] > 5){ var pageNum = parseInt($(this).children("li.on").html());//獲取當(dāng)前頁 pageDown(pageNum,pageCount[parseInt(totalnum)]); loadData(pageNum); }else{ var index = $(this).children("ul li.on").index()+1;//獲取當(dāng)前頁 console.log(index); if(index+1 < pageCount[parseInt(totalnum)]){ $(this).prev().find("li").removeClass("on");//清除所有選中 $(this).prev().find("ul li").eq(index+1).addClass("on");//選中下一頁 loadData(index+2); } } }); }); //點(diǎn)擊跳轉(zhuǎn)頁面 function pageGroup(pageNum,pageCount){ 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; } } //根據(jù)當(dāng)前選中頁生成頁面點(diǎn)擊按鈕 function page_icon(page,count,eq,element){ var $this = element; var ul_html = ""; for(var i=page; i<=count; i++){ ul_html += "<li>"+i+"</li>"; } $this.children("ul").html(ul_html); console.log($this.children("ul li:eq("+eq+")")); $this.find("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; } } //生成分頁按鈕 function createBtn(pageCount, element){ if(pageCount>5){ page_icon(1,5,0,element); }else{ page_icon(1,pageCount,0,element); } }
頁面上該頁碼控件按鈕的代碼
<div id="pageGro" class="cb"> <div class="pageUp">上一頁</div> <div class="pageList"> <ul> <!--頁碼顯示區(qū) --> </ul> </div> <div class="pageDown">下一頁</div> </div>
頁面上寫的用于被該頁碼控件調(diào)用實(shí)現(xiàn)無刷新加載數(shù)據(jù)的ajax方法
//ajax獲取點(diǎn)擊分頁按鈕應(yīng)該加載的數(shù)據(jù) function loadData(pageNum){ console.log("type = "+type +", praise = " + praise); var beChangeElement = ''; switch(type){ case 0: beChangeElement += "#togivineva ";break; default:; case 1: beChangeElement += "#givineva ";break; } switch(praise){ default:; case 0:beChangeElement += ".praiseAll";break; case 1:beChangeElement += ".praiseBad";break; case 2:beChangeElement += ".praiseNormal";break; case 3:beChangeElement += ".praiseGood";break; } $.ajax({ type:"Get", url:你要請(qǐng)求的url地址, data:{page:pageNum}, dataType:'json', success:function(data){ var info = data.info; if(info.length > 0){//判斷ajax回來的數(shù)據(jù)是否為空 var s = ''; beChangeElement = $(beChangeElement); console.log(beChangeElement); beChangeElement.children("div.detail-content").remove(); $.each(info, function(index,v){ s="你ajax出來要填補(bǔ)到頁面上的數(shù)據(jù)"; beChangeElement.children("#pageGro").before(s);//表示將s中的內(nèi)容填充到相應(yīng)頁碼控件前面 }); }else{ var t = "<p style='text-align:center;margin:20px;font-size:18px;color:#999;'>暫時(shí)還沒有內(nèi)容哦!</p>"; beChangeElement.html(t); } }, }); }
到此,該頁碼控件的使用就完成了。
在其中需要注意的內(nèi)容如下:
1.大家都可以看到我在ajax中用beChangeElement這個(gè)變量來表示我選中的選擇器時(shí),是把該選擇器的標(biāo)簽以字符串的形式存儲(chǔ)在變量中,在需要調(diào)用的時(shí)候才使用$()轉(zhuǎn)換為選擇器。為什么我不能在前面就直接把選擇器賦給變量呢。因?yàn)閖Query不允許你選擇不存在的選擇器。這么說,可能就要有疑問了,什么樣的情況下我要選擇的選擇器會(huì)不存在?(第一種情況:你把選擇器的名字寫錯(cuò)了,所以jquery找不到(我相信大多數(shù)人是不會(huì)犯這個(gè)錯(cuò)誤的)。第二種情況:在我們使用ajax進(jìn)行數(shù)據(jù)交互的時(shí)候,有很多頁面上的標(biāo)簽和數(shù)據(jù)是我們通過ajax傳遞顯示在頁面上的,這些標(biāo)簽數(shù)據(jù)在頁面初始化階段是不存在的,但是我們寫的js方法,非觸發(fā)事件(除點(diǎn)擊事件,鼠標(biāo)懸浮等需要交互的時(shí)間)都會(huì)在頁面初始化的裝載階段被解釋執(zhí)行,所以就會(huì)存在變量獲取到不存在的選擇器使得值為空阻斷后續(xù)對(duì)這個(gè)選擇器進(jìn)行js操作),如果你在使用的時(shí)候發(fā)現(xiàn)js對(duì)某個(gè)選擇器的操作失效了,就可以考慮一下這樣的情況
2.ajax生成出來的頁面內(nèi)容不能跟之前頁面初始化時(shí)生成的內(nèi)容一樣被頁面原有的js控制。因?yàn)檫@涉及到一個(gè)異步和同步的問題,在頁面渲染的時(shí)候會(huì)將對(duì)應(yīng)的js綁定到相應(yīng)的html標(biāo)簽上,等待事件觸發(fā),但是因?yàn)閍jax出來的頁面內(nèi)容出現(xiàn)在頁面原有的js之后,所以js無法未卜先知的去綁定它。所以我們需要根據(jù)事件冒泡機(jī)制,將需要對(duì)ajax生成出來的頁面內(nèi)容進(jìn)行操作的js委托給該內(nèi)容的父標(biāo)簽進(jìn)行處理(我們一般選用標(biāo)簽作為這樣的父標(biāo)簽,但是要注意的是,不要一次性委托太多的js在標(biāo)簽上,不然使得頁面變得很龐大,頁面的處理速度會(huì)變慢),委托事件可以表示如下:
1.$("body").on('click', ".cumulative-eva a",function(){});//
click:表示要委托的事件類型(這里表示要委托的事件是點(diǎn)擊事件),".cumulative-eva a":觸發(fā)事件的選擇器名字(這里表示觸發(fā)點(diǎn)擊事件的選擇器是$(.cumulative-eva a)),
function里面寫觸發(fā)事件后js對(duì)該事件的處理代碼。
2.$(".cumulative-eva a").live("click",function(){});
3.在js中我寫了這么一條js語句來選中上一頁,語句如下:
$(this).next().find("ul li").eq(index-1).addClass("on");//選中上一頁
有的人就會(huì)想在這里為什么不用children(),用children()是否也可以?那么,在解釋這個(gè)問題之前我們先來看看children()和find()的區(qū)別。
區(qū)別如下:
關(guān)于遍歷:children()是對(duì)當(dāng)前選中的選擇器標(biāo)簽進(jìn)行編號(hào),對(duì)于該選擇器標(biāo)簽的子類標(biāo)簽無論多少個(gè)都當(dāng)成一個(gè)整體,不對(duì)其進(jìn)行區(qū)分。而find()則是對(duì)當(dāng)前選中的選擇器標(biāo)簽下面的子孫類標(biāo)簽進(jìn)行編號(hào),通過編號(hào)可以找到相對(duì)應(yīng)的某一個(gè)子孫類標(biāo)簽。
從以上的描述我們很顯然知道children()并不適用于我們這樣一個(gè)應(yīng)用場景,因?yàn)槲覀冃枰x中$(this)下的某一個(gè)li,這個(gè)用children()是做不到的。那么什么樣的情況下可以使用children()呢,看下面這段js:
var pageNum = parseInt($(this).children("li.on").html());//獲取當(dāng)前頁
在這個(gè)應(yīng)用場景下因?yàn)轫摯a控件的特殊性,被加上“on”這個(gè)class的li標(biāo)簽同一時(shí)間頁面上只可能有一個(gè),所以用children()去遍歷$(this)找他的子類被加上“on”這個(gè)class的li標(biāo)簽,只可能返回一個(gè)結(jié)果,而不是一個(gè)數(shù)組,所以在這樣的場景下可以使用children()標(biāo)簽。
以上為我寫頁碼控件的全部內(nèi)容,至此mark一下。最后放上該頁碼控件的css代碼,讓大家參考參考,至于控件所用的圖片,我直接上傳到css代碼后面,你們需要的時(shí)候保存下來使用就行。(作為一個(gè)懶人,可供下載的源碼包啥的我就不弄了,太麻煩,如果有興趣的朋友,以后有時(shí)間的時(shí)候我再弄一份出來吧~)
頁碼控件css樣式:
/* CSS Document */ /*分頁*/ #pageGro{ width:400px; height:25px; margin:20px auto;} #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(../img/pageUp.png) 5px 7px no-repeat;} #pageGro .pageDown{ text-indent:5px; background:url(../img/pageDown.png) 46px 6px no-repeat;}
頁碼控件中使用的上下頁圖標(biāo):
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)ajax無刷新分頁頁碼控件,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。