js+bootstrap实现分页页码
2018-06-24 01:14:35来源：未知 阅读 ()
制作page.jsp，在其他页码引入，只需把最外层的form标签的id设置为myForm；
其中 totalPages:共有多少页；totalElements：共有有多少条记录；currentPage：第几页
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html> 6 <head> 7 <link href="${pageContext.request.contextPath}/。。。/bootstrap.css" rel="stylesheet" type="text/css"> 8 <script src="${pageContext.request.contextPath}/。。。/jquery/1.11.1/jquery.js" type="text/javascript"></script> 9 <script src="${pageContext.request.contextPath}/。。。/bootstrap.js" type="text/javascript"></script> 10 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 11 <title>分页页面</title> 12 <style type="text/css"> 13 /*翻页*/ 14 .jump{ 15 margin:0px 0; 16 float: right; 17 } 18 .jump_text{ 19 float:right; 20 margin:0 0 0 5px; 21 line-height:33px; 22 } 23 .jump_text input{ 24 width:40px; 25 border:rgba(212,212,212,1.00) 1px solid; 26 height:30px; 27 line-height:33px; 28 background:#fff;} 29 </style> 30 <script type="text/javascript"> 31 32 /* 33 * 引用此页面，只需在外面 34 */ 35 36 function goPage(){ 37 var jumpPage = document.getElementById("jumpPage").value; 38 var totalPage = '${totalPages}'; 39 if(isNaN(jumpPage)){ 40 alert("请输入数字!"); 41 return; 42 }else if(jumpPage.length==0){ 43 alert("请输入页码!"); 44 }else if(jumpPage<=0 || Number(jumpPage)>Number(totalPage)){ 45 alert("非法的页码【"+jumpPage+"】!"); 46 document.getElementById("jumpPage").value=""; 47 return; 48 }else{ 49 var flag = $("input[name='pageNumber']"); 50 flag.remove(); 51 $("#myForm").append("<input type='hidden' name='currentPage' value='"+jumpPage+"' />"); 52 $("#myForm").submit(); 53 } 54 } 55 function pageTo(pageNumber){ 56 var jumpPage=1; 57 if(pageNumber==-1){ 58 var curpage='${pageNumber}'; 59 jumpPage=Number(curpage)-1; 60 }else if(pageNumber==-2){ 61 var curpage='${pageNumber}'; 62 jumpPage=Number(curpage)+1; 63 }else{ 64 jumpPage=Number(pageNumber); 65 } 66 var flag = $("input[name='pageNumber']"); 67 flag.remove(); 68 $("#myForm").append("<input type='hidden' name='currentPage' value='"+jumpPage+"' />"); 69 $("#myForm").submit(); 70 } 71 </script> 72 </head> 73 <body> 74 <!-- 分页页码 --> 75 <div style="height: 400px;"> 76 77 </div> 78 <hr> 79 <nav> 80 <ul class="pagination"> 81 82 <!-- 上一页 --> 83 <!-- 当当前页码为1时，隐藏上一页按钮 --> 84 <li <c:if test="${currentPage==1 }">class="disabled"</c:if>> 85 <!-- 当当前页码不等于1时，跳转到上一页 --> 86 <a 87 <c:if test="${currentPage==1 }">href="javaScript:void(0)"</c:if> 88 <c:if test="${currentPage!=1 }">href="javaScript:pageTo('${currentPage-1 }')"</c:if> 89 >上一页</a> 90 </li> 91 92 <!-- 页码 --> 93 <!-- 当总页数小于等于7时，显示页码1...7页 --> 94 <c:if test="${totalPages<=7}"> 95 <c:forEach begin="1" end="${totalPages}" var="i"> 96 <li <c:if test="${currentPage==i }">class="active"</c:if>> 97 <a 98 href="javaScript:pageTo('${i}')">${i}</a> 99 </li> 100 </c:forEach> 101 </c:if> 102 <!-- 当总页数大于7时 --> 103 <c:if test="${totalPages>7}"> 104 <!-- 当前页数小于等于4时，显示1到5...最后一页 --> 105 <c:if test="${currentPage<=4}"> 106 <c:forEach begin="1" end="5" var="i"> 107 <li <c:if test="${currentPage==i }">class="active"</c:if>> 108 <a 109 href="javaScript:pageTo('${i}')">${i}</a> 110 </li> 111 </c:forEach> 112 <li><a href="#">...</a></li> 113 <li 114 <c:if test="${currentPage==totalPages }">class="active"</c:if>> 115 <a 116 href="javaScript:pageTo('${totalPages}')">${totalPages}</a> 117 </li> 118 </c:if> 119 <!-- 当前页数大于4时，如果当前页小于总页码书-3，则显示1...n-1,n,n+1...最后一页 --> 120 <c:if test="${currentPage>4}"> 121 <c:if test="${currentPage<totalPages-3}"> 122 <li><a 123 href="javaScript:pageTo('${1}')">${1}</a> 124 </li> 125 <li><a href="#">...</a></li> 126 <c:forEach begin="${currentPage-1 }" end="${currentPage+1 }" 127 var="i"> 128 <li <c:if test="${currentPage==i }">class="active"</c:if>> 129 <a 130 href="javaScript:pageTo('${i}')">${i}</a> 131 </li> 132 </c:forEach> 133 <li><a href="#">...</a></li> 134 <li 135 <c:if test="${currentPage==totalPages }">class="active"</c:if>> 136 <a 137 href="javaScript:pageTo('${totalPages}')">${totalPages}</a> 138 </li> 139 </c:if> 140 </c:if> 141 <!-- 当前页数大于4时，如果当前页大于总页码书-4，则显示1...最后一页-3，最后一页-2，最后一页-1，最后一页 --> 142 <c:if test="${currentPage>totalPages-4}"> 143 <li><a 144 href="javaScript:pageTo('${1}')">${1}</a> 145 </li> 146 147 <li><a href="#">...</a></li> 148 <c:forEach begin="${totalPages-3 }" 149 end="${totalPages }" var="i"> 150 <li <c:if test="${currentPage==i }">class="active"</c:if>> 151 <a 152 href="javaScript:pageTo('${i}')">${i}</a> 153 </li> 154 </c:forEach> 155 </c:if> 156 </c:if> 157 <!-- 下一页 --> 158 <!-- 当当前页码为最后一页或者最后一页为0时，隐藏下一页按钮 159 当当前页码不等于总页码时，跳转下一页 --> 160 <li 161 <c:if test="${currentPage==totalPages || totalPages==0}">class="disabled"</c:if>> 162 <a 163 <c:if test="${currentPage==totalPages || totalPages==0 }">href="javaScript:void(0)"</c:if> 164 <c:if test="${currentPage!=totalPages }">href="javaScript:pageTo('${currentPage+1 }')"</c:if>>下一页</a> 165 </li> 166 </ul> 167 168 <!-- 跳转页 --> 169 <div class="jump"> 170 <span class="jump_text">共有${totalPages }页,${totalElements }条记录,跳到 171 <input type="text" name="jumpPage" 172 id="jumpPage" 173 onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');">页 174 <button type="button" class="btn btn-primary btn-xs" 175 onclick="goPage()">GO</button> 176 </span> 177 </div> 178 </nav> 179 180 <div style="clear: both;"></div> 181 <hr> 182 totalPages:共有多少页；totalElements：共有有多少条记录；currentPage：第几页 183 </body> 184 </html>
展示：
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- Vue 结合html2canvas和jsPDF实现html页面转pdf 2020-04-25
- Bootstrap4 按钮组+徽章（Badges）+进度条+分页+列表组 2020-04-16
- 10.布局:两栏和主区域在后的三栏布局，实现侧边栏和主区域伪 2020-04-12
- 5.通过定位实现二级菜单 2020-04-10
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签