純jquery如何實(shí)現(xiàn)分頁(yè)效果?這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容,讓我們一起來(lái)看看吧!
成都創(chuàng)新互聯(lián)從2013年開(kāi)始,是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元馬村做網(wǎng)站,已為上家服務(wù),為馬村各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220我們?cè)谇岸隧?yè)面開(kāi)發(fā)過(guò)程中,如果一個(gè)頁(yè)面顯示的數(shù)據(jù)過(guò)多、頁(yè)面過(guò)長(zhǎng),會(huì)讓用戶的體驗(yàn)感下降。這個(gè)時(shí)候,我們就需要把數(shù)據(jù)分成好幾頁(yè)來(lái)顯示,也就是所謂的分頁(yè)。
下面我們就通過(guò)簡(jiǎn)單的代碼示例,為大家詳細(xì)介紹用純jquery實(shí)現(xiàn)一個(gè)前端超簡(jiǎn)單的分頁(yè)效果!
css代碼:
ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; border: 1px solid blue; border-radius:3px; } .active{ background-color: #7FFFAA; }
html代碼:
<h3>最簡(jiǎn)單的分頁(yè)</h3> <ul class="pagination"></ul> <input type="hidden" id="currentPage" name="currentPage" value="1"></input> <input type="hidden" id="totalPage" value="54"></input>
js腳本文件
1、引用Jquery和分頁(yè)腳本
<script src="/js/jquery.min.js" type="text/javascript"></script> <script src="/js/jquery.PageBar.js" type="text/javascript"></script>
2、編寫(xiě)jquery.PageBar.js腳本
$().ready(function(){ var curPage =$("#currentPage").val(); var last =$("#totalPage").val(); var page =Math.ceil(curPage/10); //調(diào)用繪制分頁(yè)樣式函數(shù) draw(page,curPage); //綁定點(diǎn)擊頁(yè)碼事件 $(document).on("click",".pagination li a",function(){ var str =$(this).html(); if(!isNaN(str)){ //移除之前的active $(".pagination li a").removeClass("active"); $(this).attr("class","active"); $("#currentPage").val(str); } }); //綁定下一頁(yè)點(diǎn)擊事件 $(document).on("click","#nextPage",function(){ var num =$(".active").html(); var curPage =$("#currentPage").val(); var last =$("#totalPage").val(); var page =Math.ceil((parseInt(num))/10); if(num < page*10 && num != last){ //移除之前的active $(".pagination li a").removeClass("active"); $("#"+(parseInt(num)+1)+"").attr("class","active"); //$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持 $("#currentPage").val(parseInt(num)+1); }else if(num == page*10 && num != last){ //清空之前的數(shù)據(jù) $(".pagination").html(""); draw(page+1,(parseInt(num)+1)); } }) //綁定上一頁(yè)點(diǎn)擊事件 $(document).on("click","#previousPage",function(){ var num =$(".active").html(); var curPage =$("#currentPage").val(); var last =$("#totalPage").val(); var page =Math.ceil((parseInt(num))/10); if(num <= page*10 && num != (page-1)*10+1){ //移除之前的active $(".pagination li a").removeClass("active"); $("#"+(parseInt(num)-1)+"").attr("class","active"); //$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持 $("#currentPage").val(parseInt(num)-1); }else if(num == (page-1)*10+1 && num != 1){ //清空之前的數(shù)據(jù) $(".pagination").html(""); draw(page-1,(parseInt(num)-1)); } }) //繪制頁(yè)面分頁(yè)樣式 function draw(page,curPage){ //頁(yè)面中的當(dāng)前頁(yè) var page =page; //后臺(tái)傳過(guò)來(lái)的頁(yè)數(shù) var curPage = curPage; //后臺(tái)傳過(guò)來(lái)的總頁(yè)數(shù) var datas =$("#totalPage").val(); //每頁(yè)顯示多少條數(shù)據(jù) var pageSize =10; //在網(wǎng)頁(yè)中一共要分多少頁(yè) var totalPage = Math.floor((datas-1)/pageSize+1); var liStr ="<li><a id='previousPage' href='#'>上一頁(yè)</a></li>"; $("#currentPage").val(curPage); if(page <= totalPage){ if(datas <= 10){ for(i=1; i<=datas; i++){ //為當(dāng)前頁(yè)增加樣式 var active =""; if(i==curPage){ active=" class='active' "; } liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>" } }else{ var start =pageSize*(page-1)+1; var end =page*pageSize; if(page == totalPage){ for(i=start; i<=datas; i++){ //為當(dāng)前頁(yè)增加樣式 var active =""; if(i==curPage){ active=" class='active' "; } liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>" } }else{ for(i=start; i<=end; i++){ //為當(dāng)前頁(yè)增加樣式 var active =""; if(i==curPage){ active=" class='active' "; } liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>" } } } } liStr +="<li><a id='nextPage' href='#'>下一頁(yè)</a></li>"; $(".pagination").append(liStr); } })
我們來(lái)看看效果圖:
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)純jquery如何實(shí)現(xiàn)分頁(yè)效果大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
本文名稱(chēng):純jquery如何實(shí)現(xiàn)分頁(yè)效果-創(chuàng)新互聯(lián)
文章來(lái)源:http://muchs.cn/article34/cdchpe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、App開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)、域名注冊(cè)、網(wǎng)站制作、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容