寫了一個Jquery異步分頁插件，拿出來分享一下，有不完善之處請指教。
以用戶分頁為例，先看一下效果，首先是第一頁：
下一頁或者點擊第二頁后：
點擊尾頁后：
效果還可以吧？來看看具體怎么用，首先后臺要有一個Page模型：
Page.java：
public class Page { /** * 當前頁號 */ private int currPageNum = 1; /** * 總記錄數 */ private int totalRowSize = 0; /** * 每頁記錄數 */ private int pageRowSize = 10; public int getCurrPageNum() { return currPageNum; } public void setCurrPageNum(int currPageNum) { this.currPageNum = currPageNum; } public int getTotalPageNum() { int total = (totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1); return total; } public int getTotalRowSize() { return totalRowSize; } public void setTotalRowSize(int totalRowSize) { this.totalRowSize = totalRowSize; } public int getPageRowSize() { return pageRowSize; } public void setPageRowSize(int pageRowSize) { this.pageRowSize = pageRowSize; } public int getFirstResult(){ if(getCurrPageNum()<=0) return 0; return getPageRowSize() * (getCurrPageNum() - 1); } public int getMaxResult() { return this.getFirstResult()+this.getPageRowSize(); } } 然后看list_user.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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> <title>異步分頁</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="../css/local.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../js/asyn_page.js"></script> <script type="text/javascript"> var totalRowSize = ${totalRowSize}; $(document).ready(function(){ $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize); }); //構建內容 function buildHtml(users){ $.each(users,function(i,user){ var tr = [ '<tr>', '<td>',user.userId,'</td>', '<td>',user.username,'</td>', '<td>',user.sex,'</td>', '<td>',user.age,'</td>', '<td>',user.email,'</td>', '<td>',user.address,'</td>', '<td>',user.registerTime,'</td>', '<td></td>', '</tr>' ].join(''); $("#tbody").append(tr); }); } </script> </head> <body> <table> <thead> <tr> <th>ID</th> <th>用戶名</th> <th>性別</th> <th>年齡</th> <th>Email</th> <th>地址</th> <th>注冊時間</th> <th>操作</th> </tr> </thead> <tbody id="tbody"></tbody> </table> <div id="pageWidget" class="page"></div> </body> </html> 可以看到id為tbody的元素是作為分頁內容展示容器，id為pageWidget的元素作為分頁控件展示容器。
然后提供了一個buildHtml()函數來具體構建分頁內容的。
使用異步分頁插件很簡單，只要這么調用：
$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize); 這是最簡化調用。還可以傳額外查詢參數，以及定制每頁顯示記錄數，具體使用方式見插件的具體介紹。
下面是asynPage插件內容：
/* * ===================AJAX異步分頁================= * * Copyright 2012 8 23, zhutx * * 假設id為pageWidget的div是你放置分頁控件的容器，則按如下形式調用： * $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10}); * 參數說明： * ------------Required----------- * 參數一：請求URL * 參數二：渲染結果集的頁面容器 * 參數三：負責渲染結果集到頁面的函數 * 參數四：總記錄數 * ------------Optional----------- * 參數五(json對象)： * 屬性pageRowSize:每頁記錄數(不配置，則默認為20) * 屬性param:請求參數(json格式) */ (function($){ var settings; var page; var paramStr; $.fn.asynPage = function(url,contentContainer,buildHtml_fun,totalRowSize,callerSettings){ settings = $.extend({ currPageNum:1, pageRowSize:20, param:null },callerSettings||{}); settings.contentContainer = $(contentContainer); settings.url = url; settings.pageWidget = this; settings.totalRowSize = totalRowSize; settings.buildHtml_fun = buildHtml_fun; page = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize); paramStr = makeParamStr(settings.param); //開始獲取數據 fetchData(page.getCurrPageNum()); return this; }; /* 將json轉換為請求參數字符串 */ var trunParamConfig2RequestParamStr = function(json){ var str = ""; for(key in json){ if(str==""){ str += key+"="+json[key]; }else{ str += "&"+key+"="+json[key]; } } return str; }; /* 將配置參數拼接為請求字符串 */ var makeParamStr = function(param_json){ if(param_json==null){ return ""; }else{ return trunParamConfig2RequestParamStr(param_json); } }; /* * 負責獲取后臺數據，獲取完畢后會觸發構建分頁控件 */ var fetchData = function(currPageNum){ page.setCurrPageNum(currPageNum); var firstResult = page.getFirstResult(); var maxResult = page.getMaxResult(); var pageRowSize = page.getPageRowSize(); var data = null; if(paramStr){ data = paramStr + "&page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult; }else{ data = "page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult; } $.ajax({ type :"POST", url : settings.url, data :data, success :function(datas){ settings.contentContainer.empty(); settings.buildHtml_fun(datas); buildPageWidget(page);//觸發構建分頁控件 }, error:function(xmlHttpRequest,textStatus,errorThrown){ if(textStatus == "error"){ var error = eval('('+xmlHttpRequest.responseText+')'); alert("Sorry："+error.errorCode+"，"+error.message+"！"); } } }); }; var trunTargetPage = function(pageNum){ fetchData(pageNum); } /* 為分頁控件綁定事件 */ var bindEvent = function(){ var links = settings.pageWidget.find("a"); $.each(links,function(i,link){ var link = $(link); var pageNum = link.attr("pageNum"); link.click(function(){ trunTargetPage(pageNum); }); }); } /* 構建分頁控件的具體算法實現 */ var buildPageWidget = function(page){ //構建分頁控件前，先清理現有控件 settings.pageWidget.empty(); /* --------------- 下面開始進入真正的分頁控件構建過程 -------------- */ /* --------------- 1.開始：構建描述信息（如“共？頁，？條記錄”） ----------------- */ settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>頁 <span>"+page.getTotalRowSize()+"</span>條記錄</div>"); settings.pageWidget.append("<ul>"); /* --------------- 1.結束：構建描述信息（如“共？頁，？條記錄”） ----------------- */ /* --------------- 2.開始：構建“首頁”和“上一頁”控件 ------------- */ var currPageNum = Number(page.getCurrPageNum()); var totalPageNum = Number(page.getTotalPageNum()); if(currPageNum==1){ //如果你希望當前頁是第一頁的時候，也允許“首頁”和“上一頁”控件出現，則可以在這里進行補充 }else{ settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首頁' class='first'>首頁</a></li>"); settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一頁' class='prev'>上一頁</a></li>"); } /* --------------- 2.結束：構建“首頁”和“上一頁”控件 ------------- */ /* --------------- 3.開始：構建分頁數字控件 -------------- */ if(totalPageNum<10){ for(var i=1;i<=totalPageNum;i++){ if(i==currPageNum){ settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); }else{ settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>"); } } //如果總頁數>=10 }else{ //如果當前頁小于5，則顯示1-9項，且記憶當前項 if(currPageNum<5){ for(var i =1;i<10;i++){ if(i==currPageNum){ settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); }else{ settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>"); } } //如果當前頁>=5，且總頁數與當前頁的差<4 }else if(totalPageNum-currPageNum<4){ for(var i=totalPageNum-8;i<=totalPageNum;i++){ if(i==currPageNum){ settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); }else{ settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>"); } } //如果當前頁>=5，則顯示圍繞當前頁的9項，且記憶當前項 }else{ for(var i=currPageNum-4;i<currPageNum+5;i++){ if(i==currPageNum){ settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>"); }else{ settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void("+i+");' title='' class=''>"+i+"</a></li>"); } } } } /* --------------- 3.結束：構建分頁數字控件 -------------- */ /* --------------- 4.開始：構建“下一頁”和“尾頁”控件 ------------- */ if(totalPageNum==currPageNum){ //如果你希望當前頁是最后一頁的時候，也允許“尾頁”和“下一頁”控件出現，則可以在這里進行補充 }else{ settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一頁' class='next'>下一頁</a></li>"); settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+totalPageNum+"' href='javascript:void(0);' title='尾頁' class='last'>尾頁</a></li>"); } /* --------------- 4.結束：構建“下一頁”和“尾頁”控件 ------------- */ //還要為控件綁定點擊事件 bindEvent(); } })(jQuery); /* * Page類 */ function Page(currPageNum,totalRowSize,pageRowSize){ this.currPageNum = currPageNum; this.totalRowSize = totalRowSize; this.pageRowSize = pageRowSize; } Page.prototype.getCurrPageNum = function(){ return this.currPageNum; }; Page.prototype.setCurrPageNum = function(currPageNum){ this.currPageNum = currPageNum; }; Page.prototype.getTotalPageNum = function(){ return (this.totalRowSize%this.pageRowSize==0)?(this.totalRowSize/this.pageRowSize):(Math.floor(this.totalRowSize/this.pageRowSize)+1); }; Page.prototype.getTotalRowSize = function(){ return this.totalRowSize; }; Page.prototype.setTotalRowSize = function(totalRowSize){ this.totalRowSize = totalRowSize; }; Page.prototype.getPageRowSize = function(){ return this.pageRowSize; }; Page.prototype.setPageRowSize = function(pageRowSize){ this.pageRowSize = pageRowSize; }; Page.prototype.getFirstResult = function(){ if(this.getCurrPageNum()<=0) return 0; return this.getPageRowSize() * (this.getCurrPageNum() - 1); }; Page.prototype.getMaxResult = function(){ return this.getFirstResult() + this.getPageRowSize(); }; 以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
