簡(jiǎn)單的分頁(yè)代碼js實(shí)現(xiàn)
先看看效果圖:
簡(jiǎn)單的分頁(yè)js代碼:
1、效果描述:
不用分頁(yè)即可顯示的jQuery插件
jQuery分頁(yè)插件——jQuery.page.js用法很簡(jiǎn)單,效果很棒
2、調(diào)用方法:
$(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //單擊回調(diào)方法,p是當(dāng)前頁(yè)碼 } }); pageCount:總頁(yè)數(shù) current:當(dāng)前頁(yè)
3、js封裝代碼
//分頁(yè)插件 /** ch **/ (function($){ var ms = { init:function(obj,args){ return (function(){ ms.fillHtml(obj,args); ms.bindEvent(obj,args); })(); }, //填充html fillHtml:function(obj,args){ return (function(){ obj.empty(); //上一頁(yè) if(args.current > 1){ obj.append('<a href="javascript:;" class="prevPage">上一頁(yè)</a>'); }else{ obj.remove('.prevPage'); obj.append('<span class="disabled">上一頁(yè)</span>'); } //中間頁(yè)碼 if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>'); } if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ obj.append('<span>...</span>'); } var start = args.current -2,end = args.current+2; if((start > 1 && args.current < 4)||args.current == 1){ end++; } if(args.current > args.pageCount-4 && args.current >= args.pageCount){ start--; } for (;start <= end; start++) { if(start <= args.pageCount && start >= 1){ if(start != args.current){ obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>'); }else{ obj.append('<span class="current">'+ start +'</span>'); } } } if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ obj.append('<span>...</span>'); } if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>'); } //下一頁(yè) if(args.current < args.pageCount){ obj.append('<a href="javascript:;" class="nextPage">下一頁(yè)</a>'); }else{ obj.remove('.nextPage'); obj.append('<span class="disabled">下一頁(yè)</span>'); } })(); }, //綁定事件 bindEvent:function(obj,args){ return (function(){ obj.on("click","a.tcdNumber",function(){ var current = parseInt($(this).text()); ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current); } }); //上一頁(yè) obj.on("click","a.prevPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current-1); } }); //下一頁(yè) obj.on("click","a.nextPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current+1); } }); })(); } } $.fn.createPage = function(options){ var args = $.extend({ pageCount : 10, current : 1, backFn : function(){} },options); ms.init(this,args); } })(jQuery);
4、使用demo:
<!DOCTYPE html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>一個(gè)非常簡(jiǎn)單的jQuery分頁(yè)插件</title> <style> *{ margin:0; padding:0; list-style:none;} a{ text-decoration:none;} a:hover{ text-decoration:none;} .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;} .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} .tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} </style> </head> <body> <style> .baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;} </style> <div class="baidu_ads"> </div> <span style="display:none;"> </span><!-- 代碼部分begin --> <div class="tcdPageCode"> </div> <pre> 調(diào)用方法: $(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //單擊回調(diào)方法,p是當(dāng)前頁(yè)碼 } }); pageCount:總頁(yè)數(shù) current:當(dāng)前頁(yè) </pre> </body> <script src="http://www.dbjr.com.cn/ajaxjs/jquery.min.js"></script> <script src="http://www.dbjr.com.cn/ajaxjs/jquery.page.js"></script> <script> $(".tcdPageCode").createPage({ pageCount:6, current:1, backFn:function(p){ console.log(p); } }); </script> <!-- 代碼部分end --> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)Javascript有所幫助。
相關(guān)文章
javascript中BOM基礎(chǔ)知識(shí)總結(jié)
本文主要對(duì)javascript中BOM基礎(chǔ)知識(shí)進(jìn)行總結(jié)。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02childNodes.length與children.length的區(qū)別
childNodes.length與children.length的值常不一樣。2009-05-05bootstrap-paginator服務(wù)器端分頁(yè)使用方法詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap-paginator服務(wù)器端分頁(yè)的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02JS判斷空對(duì)象的幾個(gè)方法大盤點(diǎn)
在做數(shù)據(jù)交互的時(shí)候,我們經(jīng)常需要判斷數(shù)據(jù)或者對(duì)象是不是為空,避免當(dāng)接口異常時(shí)候前端頁(yè)面崩潰,下面這篇文章主要給大家介紹了關(guān)于JS判斷空對(duì)象的幾個(gè)方法,需要的朋友可以參考下2022-02-02網(wǎng)站頁(yè)面自動(dòng)跳轉(zhuǎn)實(shí)現(xiàn)方法PHP、JSP(上)
自動(dòng)轉(zhuǎn)向,也叫自動(dòng)重定向。自動(dòng)跳轉(zhuǎn),指當(dāng)訪問(wèn)用戶登陸到某網(wǎng)站時(shí),自動(dòng)將用戶轉(zhuǎn)向其它網(wǎng)頁(yè)地址的一種技術(shù)。轉(zhuǎn)向的網(wǎng)頁(yè)地址可以是網(wǎng)站內(nèi)的其它網(wǎng)頁(yè),也可以是其它網(wǎng)站。2010-08-08瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之動(dòng)態(tài)腳本與Ajax腳本注入
這篇文章主要介紹了瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之動(dòng)態(tài)腳本與Ajax腳本注入 的相關(guān)資料,需要的朋友可以參考下2016-01-01利用 JavaScript 實(shí)現(xiàn)并發(fā)控制的示例代碼
這篇文章主要介紹了利用 JavaScript 實(shí)現(xiàn)并發(fā)控制的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常想詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12