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);
- jquery页面分页(前后台)
- 实现jquery DataTable前后台动态分页
- 前后台分页
- 网站分页前后台代码
- jquery自制分页,控制easyui datagrid分页,集中处理了一下前后台
- Extjs4中的分页使用(前后台结合)
- Jquery Ajax前后台交互
- 页面之间传递值,mvc参数问题(前后台)
- jquery validate 自定义验证方法(前后台交互)
- bootstrap-paginator分页-前后台用法示例
- 前后台页面跳转方式搜集
- 前后台页面参数互传
- jQuery.ajax 实现前后台数据传送
- Jquery多文件上传前后台代码
- Ajax+jquery 的前后台交互学习
- jQuery的ajax前后台数据交互
- jquery autocomplete前后台整合实例(1)
- jquery autocomplete前后台整合实例(2)
- Good place to learn circuit!
- [NOIP2011]铺地毯
- J2EE架构师之路
- 2012年总结
- jquery的extend和fn.extend
- jquery页面分页(前后台)
- Linux启动设置以及系统修复
- 有假币
- AsyncSocket
- UCenter同步HDWiki及其他APP用户长度限制
- POJ 1033 模拟
- java.io包 管道流使用案例
- 顶点颜色在光照计算中的作用
- 计算机的引导过程