本文實例講述了jQuery實現的簡單分頁。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS分頁Class - 風干的果子</title><style type="text/css">a {margin:3px; text-decoration:none;}</style><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">//jquery頁面加載開始$(function(){ var pageDiv1=new jsPage("list","all","p1","3"); pageMethod.call(pageDiv1); var pageDiv2=new jsPage("list2","all","p2","5"); pageMethod.call(pageDiv2);})//$//jquery 頁面加載結束//方法: pageMethodfunction pageMethod(){ var obj=this; obj.resetTotal(); obj.reloadpage("1",obj.list_class); obj.page(); //生成頁碼 ready2go.call(obj);}//方法:ready2gofunction ready2go(){ var obj=this; $("#"+obj.page_obj_id+" a").live("click",function() { //點擊頁碼的時候跳到相應頁 obj.target_p=parseInt($(this).attr("p")); gotopage.call(obj,obj.target_p); })}// 方法: showClassfunction showClass(list,x,pDiv,pSize){ var pObj=new jsPage(list,x,pDiv,pSize); pageMethod.call(pObj);}// 方法: jsPagefunction jsPage(list_id,list_class,page_obj_id,pagesize){ // list_id 結果集UL的id // list_class 要顯示的類別 // page_id 存放頁碼的id // pagesize 每頁顯示多少條 this.list_obj_id=list_id; this.list_Obj=$("#"+list_id); this.li=$("#"+list_id+" li"); this.li.hide(); this.page_obj_id=page_obj_id; this.page_obj=$("#"+page_obj_id); //存放頁碼的div this.list_class=list_class; // 類別 if(list_class=="all") { this.results=this.li.length; // 總記錄數等于所有記錄 } else { this.results=$("#"+list_id+" li."+list_class).length; // 總記錄數等于指定類別的li數 } this.totalpage; // 總頁數 this.pagesize=pagesize; //每頁記錄數 this.cpage=1; //當前頁,默認顯示第一頁 this.count; this.target_p; this.curcount; this.outstr= ""; // 輸出頁碼html}//jsPage結束//方法: gotopagefunction gotopage(target){ this.cpage = target; //把頁面計數定位到第幾頁 this.page(); this.reloadpage(target,this.list_class);}//給對象jsPage 增加函數 reloadpagejsPage.prototype.reloadpage=function(p,resultType){ this.li.hide(); for(var i=this.pagesize*p-this.pagesize;i<this.pagesize*p;i++) { if(resultType=="all") { this.li.eq(i).show(); }else { $("#"+this.list_obj_id+" li."+resultType).eq(i).show(); } }}//給對象jsPage 增加函數 resetTotaljsPage.prototype.resetTotal=function(){ if(this.results==0){ this.totalpage=0; this.cpage=0; }else if(this.results<=this.pagesize) { this.totalpage=1; } else if(parseInt(this.results/this.pagesize)==1) { this.totalpage=2; } else if(parseInt(this.results/this.pagesize)>1 && this.results%this.pagesize==0){ this.totalpage=this.results/this.pagesize; } else { this.totalpage=parseInt(this.results/this.pagesize)+1; }}//resetTotal()//jsPage 對象增加函數 pagejsPage.prototype.page=function(){ if(this.totalpage<=10) { //總頁數小于十頁 頁碼以十頁為單位 for (this.count=1;this.count<=this.totalpage;this.count++) { if(this.count!=this.cpage) { this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>"; }else { this.outstr = this.outstr + "<span class='current' >"+this.count+"</span>"; } } } if(this.totalpage>10) { //總頁數大于十頁 if(parseInt((this.cpage-1)/10) == 0) { for (this.count=1;this.count<=10;this.count++) { if(this.count!=this.cpage) { this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>"; } else { this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>"; } } this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >»</a>"; } else if(parseInt((this.cpage-1)/10) == parseInt(this.totalpage/10)) { this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<//a>"; for (this.count=parseInt(this.totalpage/10)*10+1;this.count<=this.totalpage;this.count++) { if(this.count!=this.cpage) { this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>"; } else { this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>"; } } } else { var lastP; this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<//a>"; for (this.count=parseInt((this.cpage-1)/10)*10+1;this.count<=parseInt((this.cpage-1)/10)*10+10;this.count++) { if(this.count!=this.cpage) { this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>"; } else { this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>"; } if(this.count==this.totalpage) { lastP=""; } else { lastP="<a href='javascript:void(0)' p='"+(this.count+1)+"' >»</a>"; } } this.outstr = this.outstr + lastP; } } document.getElementById(this.page_obj_id).innerHTML = "<div><span id='info'>共"+this.totalpage+"頁 第"+this.cpage+"頁<//span>" + this.outstr + "<//div>"; this.outstr = "";} </script></head><body> <a onclick="showClass('list','mm','p1','3')" href="#">美女</a> <a onclick="showClass('list','gg','p1','3')" href="#">帥哥</a> <a onclick="showClass('list','all','p1','3')" href="#">全部</a><br /> <ul id="list"> <li class="mm">美女A</li> <li class="gg">帥哥A</li> <li class="mm">美女B</li> <li class="gg">帥哥B</li> <li class="mm">美女C</li> <li class="gg">帥哥C</li> <li class="mm">美女D</li> <li class="gg">帥哥D</li> <li class="mm">美女E</li> <li class="gg">帥哥E</li> <li class="mm">美女F</li> <li class="gg">帥哥F</li> <li class="mm">美女G</li> <li class="gg">帥哥G</li> <li class="mm">美女H</li> <li class="gg">帥哥H</li> <li class="mm">美女A</li> <li class="gg">帥哥A</li> <li class="mm">美女B</li> <li class="gg">帥哥B</li> <li class="mm">美女C</li> <li class="gg">帥哥C</li> <li class="mm">美女D</li> <li class="gg">帥哥D</li> <li class="mm">美女E</li> <li class="gg">帥哥E</li> <li class="mm">美女F</li> <li class="gg">帥哥F</li> <li class="mm">美女G</li> <li class="gg">帥哥G</li> <li class="mm">美女H</li> <li class="gg">帥哥H</li> <li class="mm">美女A</li> <li class="gg">帥哥A</li> <li class="mm">美女B</li> <li class="gg">帥哥B</li> <li class="mm">美女C</li> <li class="gg">帥哥C</li> <li class="mm">美女D</li> <li class="gg">帥哥D</li> <li class="mm">美女E</li> <li class="gg">帥哥E</li> <li class="mm">美女F</li> <li class="gg">帥哥F</li> <li class="mm">美女G</li> <li class="gg">帥哥G</li> <li class="mm">美女H</li> <li class="gg">帥哥H</li> <li class="mm">美女A</li> <li class="gg">帥哥A</li> <li class="mm">美女B</li> <li class="gg">帥哥B</li> <li class="mm">美女C</li> <li class="gg">帥哥C</li> <li class="mm">美女D</li> <li class="gg">帥哥D</li> <li class="mm">美女E</li> <li class="gg">帥哥E</li> <li class="mm">美女F</li> <li class="gg">帥哥F</li> <li class="gg">帥哥G</li> <li class="gg">帥哥H</li> <li class="gg">帥哥G</li> </ul> <br /> <div id="p1"> </div> <br /> <br /> <a onclick="showClass('list2','music','p2','5')" href="#">音樂</a> <a onclick="showClass('list2','movie','p2','5')" href="#">電影</a> <a onclick="showClass('list2','all','p2','5')" href="#">全部</a><br /> <ul id="list2"> <li class="music">音樂A</li> <li class="movie">電影A</li> <li class="music">音樂B</li> <li class="movie">電影B</li> <li class="music">音樂C</li> <li class="movie">電影C</li> <li class="music">音樂D</li> <li class="movie">電影D</li> <li class="music">音樂E</li> <li class="movie">電影E</li> <li class="music">音樂F</li> <li class="movie">電影F</li> </ul> <br /> <div id="p2"> </div></body></html>PS：這里再為大家推薦幾款代碼格式化、美化工具，相信大家在以后的開發過程中會用得到：
在線JavaScript代碼美化、格式化工具：
http://tools.VeVB.COm/code/js
JavaScript壓縮/格式化/加密工具：
http://tools.VeVB.COm/code/jscompress
PHP代碼在線格式化美化工具：
http://tools.VeVB.COm/code/phpformat
XML代碼在線格式化美化工具：
http://tools.VeVB.COm/code/xmlcodeformat
json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.VeVB.COm/code/jsoncodeformat
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.VeVB.COm/code/json
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
