jQuery分页导航
由于做项目时很多模块都需要分页导航，网上找到的又大都不是想要的，所以自己动手简单写了一个。该分页导航主要是和ajax配合使用，ajax向后台传递current,pageSize两个参数，分别表示页数，页面记录大小，返回json，主要有total属性和列表数组。点击分页导航数字的时候重复上述过程。当然我以下只是简单师范，并未涉及ajax。代码如下：(还有很多不完善的地方，望见谅。)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="jquery-1.6.4.js"></script><script type="text/javascript">//界面加载完毕的初始化方法 $(document).ready(function(){initPage("page",125,1,10,7);}); /** * CopyRight By JasionNan * 该几个函数主要用于页面导航 * div --标签的id值 * total --ajax返回的记录总数 * current --第几页 * pageSize --每页显示的记录数 * count --导航显示的页数,即要显示多少个数字 * 需重写goToPage函数 */ var div,total,current=1,pageSize,count;function initPage(div,total,current,pageSize,count){this.div=div;this.total=total;this.current=current;this.pageSize=pageSize;this.count=count;this.pageList=pageList;pageList();}function pageList(){//count表示每页显示的标签数,奇数 var pages=parseInt(this.total/this.pageSize);//求出总页数 if(this.total%this.pageSize!=0){ pages++; } if(pages<2) return; var preVal=this.current-1; var nextVal=this.current+1; var pre=$("<a href='javascript:void(0)' onclick='goToPage("+preVal+")'>上一页</a>"); var next=$("<a href='javascript:void(0)' onclick='goToPage("+nextVal+")'>下一页</a>"); if(pages<=this.count){ if(this.current>1){ $('#'+this.div).append(pre); } for(var i=1;i<=pages;i++){ if(this.current==i){ $('#'+this.div).append("<a>"+i+"</a>"); }else{ $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+i+")'>"+i+"</a>"); } } }else{ var left=this.current-1,right=pages-this.current,middle=parseInt(this.count/2); if(left<=middle&left>=0){//左边页数小于count/2 var rcount=this.count-1-left;//右边显示标签个数 if(this.current>1){ $('#'+this.div).append(pre); for(var i=1;i<=left;i++){ $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+i+")'>"+i+"</a>"); } } $('#'+this.div).append("<a>"+this.current+"</a>"); if(rcount<right){ for(var i=1;i<=(rcount-1);i++){ var base=this.current+i; $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+base+")'>"+base+"</a>"); } $('#'+this.div).append("<a>...</a>"); $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+pages+")'>"+pages+"</a>"); }else{ for(var i=this.current+1;i<=pages;i++){ $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+i+")'>"+i+"</a>"); } } }else if(left>middle){//左边页数个数大于middle $('#'+this.div).append(pre); $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage(1)'>"+1+"</a>"); $('#'+this.div).append("<a>...</a>"); var rpages=pages-this.current; if(rpages<=middle){ var lcount=this.count-1-rpages; for(var i=this.current-lcount+1;i<this.current;i++){ $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+i+")'>"+i+"</a>"); } $('#'+this.div).append("<a>"+current+"</a>"); for(var i=this.current+1;i<=pages;i++){ $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+i+")'>"+i+"</a>"); } }else{ for(var i=this.current-middle+1;i<this.current;i++){ $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+i+")'>"+i+"</a>"); } $('#'+this.div).append("<a>"+this.current+"</a>"); for(var i=this.current+1;i<=this.current+middle-1;i++){ $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+i+")'>"+i+"</a>"); } $('#'+this.div).append("<a>...</a>"); $('#'+this.div).append("<a href='javascript:void(0)' onclick='goToPage("+pages+")'>"+pages+"</a>"); } } } if(this.current<pages){ $('#'+this.div).append(next); } //添加样式 $('#'+this.div+" a").css("margin",3);}function goToPage(page){ $("#"+this.div).append("<br>"); this.current=page; pageList();}</script><title>分页导航</title></head><body><div id="page"></div></body></html>效果如下：
