jquery页面分页(前后台)

来源:互联网 发布:linux搭建git服务器 编辑:程序博客网 时间:2024/06/01 12:55

效果:   首页 1 2 3 4 5 6 7 尾页



废话不多说上代码

html:

<div id="pageTop"  />

<div id="list" />

<div id="pageDown />

jquery:

//分页 beginvar size=7; //最多显示n个页码标签val="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do'>首页</a></font>";if(data.totalPage<=size) //总数小于页码{for(var i=1;i<=data.totalPage;i++){if(page==i)val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'><font color='red'>"+i+"</font></a></font>";elseval+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'>"+i+"</a></font>";}}else if(page<=Math.floor(size/2))  //当前页小于1/2页码{for(var i=1;i<=size;i++){if(page==i)val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'><font color='red'>"+i+"</font></a></font>";elseval+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'>"+i+"</a></font>";}}else if(data.totalPage-page<=Math.floor(size/2))  //当前页在1/2末尾{for(var i=data.totalPage-size;i<=data.totalPage;i++){if(page==i)val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'><font color='red'>"+i+"</font></a></font>";elseval+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'>"+i+"</a></font>";}}else //当前页在中间{for(var i=page-Math.floor(size/2);i<=page+Math.floor(size/2);i++){if(page==i)val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'><font color='red'>"+i+"</font></a></font>";elseval+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+i+"&novelTypeId="+typeid+"'>"+i+"</a></font>";}}val+="<font class='top_09'><a href='${pageContext.request.contextPath}/novel/novelType.do?page="+data.totalPage+"&novelTypeId="+typeid+"'>末页</a></font>";$("#pageDown").html(val);$("#pageTop").html(val);