标签：javascrip oct change option oca opened 获取 led jquer
1 <%-- 2 Created by IntelliJ IDEA. 3 User: jie 4 Date: 2019/5/10 5 Time: 20:00 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 10 <!DOCTYPE html> 11 <!-- 网页使用的语言 --> 12 <html lang="zh-CN"> 13 <head> 14 <!-- 指定字符集 --> 15 <meta charset="utf-8"> 16 <!-- 使用Edge最新的浏览器的渲染方式 --> 17 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 18 <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。 19 width: 默认宽度与设备的宽度相同 20 initial-scale: 初始的缩放比，为1:1 --> 21 <meta name="viewport" content="width=device-width, initial-scale=1"> 22 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 23 <title>用户信息管理系统</title> 24 25 <!-- 1. 导入CSS的全局样式 --> 26 <link href="css/bootstrap.min.css" rel="stylesheet"> 27 <!-- 2. jQuery导入，建议使用1.9以上的版本 --> 28 <script src="js/jquery-2.1.0.min.js"></script> 29 <!-- 3. 导入bootstrap的js文件 --> 30 <script src="js/bootstrap.min.js"></script> 31 <style type="text/css"> 32 td, th { 33 text-align: center; 34 } 35 .mb-10{ 36 margin-bottom: 10px; 37 } 38 .float-right{ 39 float: right; 40 } 41 .float-left{ 42 float: left; 43 } 44 .tool::after{ 45 content: ‘‘; 46 display: block; 47 clear: both; 48 } 49 .table>tbody>tr>td{ 50 vertical-align: middle; 51 } 52 .total-page{ 53 margin-top: 5px; 54 display: inline-block; 55 margin-left: 15px; 56 font-size: 16px; 57 } 58 .pageSize{ 59 display: inline-block; 60 width: auto; 61 margin: 0px 10px; 62 } 63 .jumpPage{ 64 display: inline-block; 65 width: 50px; 66 } 67 </style> 68 <script> 69 70 window.onload = function () { 71 /* 72 全选和全部选功能实现 73 1为firstCb绑定单击事件 74 3获取所有的复选框，将其状态设置为和firstCb一致 75 */ 76 var firstCb = document.getElementById("firstCb"); 77 // console.log(firstCb.checked); 78 firstCb.onclick = function () { 79 // firstCb.checked = !firstCb.checked; 80 var ids = document.getElementsByName("id"); 81 for (var i = 0; i < ids.length; i++) { 82 ids[i].checked = firstCb.checked; 83 } 84 } 85 86 /* 87 设置页的大小 88 */ 89 document.getElementById("pageSizeSelect").onchange = function(){ 90 //手动提交查询条件表单 91 document.getElementById("searchForm").submit(); 92 }; 93 /* 94 页大小控制的回显 95 */ 96 var pageSizeOptions = document.getElementById("pageSizeSelect").options; 97 for (var i = 0; i < pageSizeOptions.length; i++) { 98 if(pageSizeOptions[i].value == "${userPage.pageSize}"){ 99 pageSizeOptions[i].selected = true; 100 } 101 } 102 /* 103 页面跳转 104 */ 105 document.getElementById("jumpPage").onkeydown = function (ev) { 106 if(ev.keyCode == 13){ 107 //按下回车，将currentPage元素的值设置为输入框的值 108 // var currentPage = document.getElementById("jumpPage").value; 109 // var currentPageEle = document.getElementById("currentPage"); 110 // currentPageEle.value = currentPage; 111 var currentPageValue = document.getElementById("jumpPage").value; 112 //验证输入页码是否是数字 113 if(currentPageValue.match(/^\d+$/)){ 114 //是数字，提交表单 115 document.getElementById("currentPage").value = currentPageValue; 116 //提交表单 117 document.getElementById("searchForm").submit(); 118 }else{ 119 //不是数字，清空输入内容 120 document.getElementById("jumpPage").value = ""; 121 } 122 } 123 } 124 } 125 function deleteUser(id) { 126 if(confirm("确定要删除改用户吗？")){ 127 location.href = "/deleteServlet?id=" + id; 128 } 129 } 130 function submitDelSelected(){ 131 //判断是否选择了删除项 132 var hasSelected = false; 133 var ids = document.getElementsByName("id"); 134 for (var i = 0; i < ids.length; i++) { 135 if(ids[i].checked == true){ 136 hasSelected = true; 137 break; 138 } 139 } 140 if(hasSelected){ 141 //需要用户确认 142 if(confirm("确定要删除这些用户吗?")){ 143 document.getElementById("delSelectedForm").submit(); 144 } 145 }else{ 146 //给出还没有选择的提示 147 confirm("请先选择需要删除的用户"); 148 } 149 } 150 </script> 151 </head> 152 <body> 153 <div class="container"> 154 155 <h3 style="text-align: center">用户信息列表</h3> 156 157 <%--<div class="btn-group" role="group" aria-label="...">--%> 158 <%--<button type="button" class="btn btn-default">Left</button>--%> 159 <%--<button type="button" class="btn btn-default">Middle</button>--%> 160 <%--<button type="button" class="btn btn-default">Right</button>--%> 161 <%--</div>--%> 162 <div class="tool mb-10"> 163 <form id="searchForm" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post" class="form-inline float-left"> 164 <input type="hidden" id="currentPage" name="currentPage" value="${userPage.currentPage}"> 165 <div class="form-group"> 166 <label for="name">姓名</label> 167 <input type="text" value="${searchCondition.name[0]}" class="form-control" id="name" name="name"> 168 </div> 169 <div class="form-group"> 170 <label for="address">籍贯</label> 171 <input type="text" class="form-control" value="${searchCondition.address[0]}" id="address" name="address"> 172 </div> 173 <div class="form-group"> 174 <label for="email">邮箱</label> 175 <input type="email" class="form-control" value="${searchCondition.email[0]}" id="email" name="email"> 176 </div> 177 <button type="submit" class="btn btn-default">查询</button> 178 </form> 179 <div class="right-tool float-right"> 180 <a class="btn btn-primary" href="add.jsp" role="button">添加联系人</a> 181 <a class="btn btn-primary" href="javascript: submitDelSelected();" role="button">删除选中</a> 182 <form action="${pageContext.request.contextPath}/delSelectedServlet" method="post" id="delSelectedForm"></form> 183 <%--<button type="button" class="btn btn-primary">添加联系人</button>--%> 184 <%--<button type="button" class="btn btn-primary">删除选中</button>--%> 185 </div> 186 </div> 187 <table border="1" class="table table-bordered table-hover"> 188 <tr class="success"> 189 <th><input type="checkbox" id="firstCb"></th> 190 <th>编号</th> 191 <th>姓名</th> 192 <th>性别</th> 193 <th>年龄</th> 194 <th>籍贯</th> 195 <th>QQ</th> 196 <th>邮箱</th> 197 <th>操作</th> 198 </tr> 199 <c:forEach items="${userPage.pageData}" var="user" varStatus="vs"> 200 <tr> 201 <td><input form="delSelectedForm" type="checkbox" name="id" value="${user.id}"></td> 202 <td>${vs.count}</td> 203 <td>${user.name}</td> 204 <td>${user.gender}</td> 205 <td>${user.age}</td> 206 <td>${user.address}</td> 207 <td>${user.qq}</td> 208 <td>${user.email}</td> 209 <td><a class="btn btn-default btn-sm" href="/findUserServlet?id=${user.id}">修改</a> <a class="btn btn-default btn-sm" href="javascript: deleteUser(${user.id});">删除</a></td> 210 </tr> 211 </c:forEach> 212 </table> 213 214 <nav> 215 <ul class="pagination"> 216 <c:if test="${userPage.currentPage == 1}"> 217 <li class="disabled"> 218 </c:if> 219 <c:if test="${userPage.currentPage != 1}"> 220 <li> 221 </c:if> 222 <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${userPage.currentPage - 1}&pageSize=${userPage.pageSize}&name=${searchCondition.name[0]}&address=${searchCondition.address[0]}&email=${searchCondition.email[0]}" aria-label="Previous"> 223 <span aria-hidden="true">«</span> 224 </a> 225 </li> 226 <c:forEach begin="1" end="${userPage.totalPage}" var="i"> 227 <c:if test="${userPage.currentPage == i}"> 228 <li class="active"> 229 </c:if> 230 <c:if test="${userPage.currentPage != i}"> 231 <li> 232 </c:if> 233 <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&pageSize=${userPage.pageSize}&name=${searchCondition.name[0]}&address=${searchCondition.address[0]}&email=${searchCondition.email[0]}">${i}</a></li> 234 </c:forEach> 235 <c:if test="${userPage.currentPage == userPage.totalPage}"> 236 <li class="disabled"> 237 </c:if> 238 <c:if test="${userPage.currentPage != userPage.totalPage}"> 239 <li> 240 </c:if> 241 <a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${userPage.currentPage + 1}&pageSize=${userPage.pageSize}&name=${searchCondition.name[0]}&address=${searchCondition.address[0]}&email=${searchCondition.email[0]}" aria-label="Next"> 242 <span aria-hidden="true">»</span> 243 </a> 244 </li> 245 246 <span class="total-page">共${userPage.totalCount}条记录，共${userPage.totalPage}页</span> 247 <select form="searchForm" id="pageSizeSelect" name="pageSize" class="pageSize form-control"> 248 <option value="3">3</option> 249 <option value="5">5</option> 250 <option value="8">8</option> 251 <option value="10">10</option> 252 <option value="15">15</option> 253 </select> 254 </ul> 255 跳转到 <input id="jumpPage" class="form-control jumpPage" type="text"> 256 </nav> 257 </div> 258 </body> 259 </html>
1 <%-- 2 Created by IntelliJ IDEA. 3 User: jie 4 Date: 2019/5/10 5 Time: 20:00 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 10 <!DOCTYPE html> 11 <!-- 网页使用的语言 --> 12 <html lang="zh-CN"> 13 <head> 14 <!-- 指定字符集 --> 15 <meta charset="utf-8"> 16 <!-- 使用Edge最新的浏览器的渲染方式 --> 17 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 18 <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。 19 width: 默认宽度与设备的宽度相同 20 initial-scale: 初始的缩放比，为1:1 --> 21 <meta name="viewport" content="width=device-width, initial-scale=1"> 22 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 23 <title>用户信息管理系统</title> 24 25 <!-- 1. 导入CSS的全局样式 --> 26 <link href="css/bootstrap.min.css" rel="stylesheet"> 27 <!-- 2. jQuery导入，建议使用1.9以上的版本 --> 28 <script src="js/jquery-2.1.0.min.js"></script> 29 <!-- 3. 导入bootstrap的js文件 --> 30 <script src="js/bootstrap.min.js"></script> 31 <style type="text/css"> 32 td, th { 33 text-align: center; 34 } 35 .mb-10{ 36 margin-bottom: 10px; 37 } 38 .float-right{ 39 float: right; 40 } 41 .float-left{ 42 float: left; 43 } 44 .tool::after{ 45 content: ‘‘; 46 display: block; 47 clear: both; 48 } 49 .table>tbody>tr>td{ 50 vertical-align: middle; 51 } 52 .total-page{ 53 margin-top: 5px; 54 display: inline-block; 55 margin-left: 15px; 56 font-size: 16px; 57 } 58 .pageSize{ 59 display: inline-block; 60 width: auto; 61 margin: 0px 10px; 62 } 63 .jumpPage{ 64 display: inline-block; 65 width: 50px; 66 } 67 </style> 68 <script> 69 70 window.onload = function () { 71 /* 72 全选和全部选功能实现 73 1为firstCb绑定单击事件 74 3获取所有的复选框，将其状态设置为和firstCb一致 75 */ 76 var firstCb = document.getElementById("firstCb"); 77 // console.log(firstCb.checked); 78 firstCb.onclick = function () { 79 // firstCb.checked = !firstCb.checked; 80 var ids = document.getElementsByName("id"); 81 for (var i = 0; i < ids.length; i++) { 82 ids[i].checked = firstCb.checked; 83 } 84 } 85 86 /* 87 设置页的大小 88 */ 89 document.getElementById("pageSizeSelect").onchange = function(){ 90 //手动提交查询条件表单 91 document.getElementById("searchForm").submit(); 92 }; 93 /* 94 页大小控制的回显 95 */ 96 var pageSizeOptions = document.getElementById("pageSizeSelect").options; 97 for (var i = 0; i < pageSizeOptions.length; i++) { 98 if(pageSizeOptions[i].value == "${userPage.pageSize}"){ 99 pageSizeOptions[i].selected = true; 100 } 101 } 102 /* 103 页面跳转 104 */ 105 document.getElementById("jumpPage").onkeydown = function (ev) { 106 if(ev.keyCode == 13){ 107 //按下回车，将currentPage元素的值设置为输入框的值 108 // var currentPage = document.getElementById("jumpPage").value; 109 // var currentPageEle = document.getElementById("currentPage"); 110 // currentPageEle.value = currentPage; 111 var currentPageValue = document.getElementById("jumpPage").value; 112 //验证输入页码是否是数字 113 if(currentPageValue.match(/^\d+$/)){ 114 //是数字，提交表单 115 document.getElementById("currentPage").value = currentPageValue; 116 //提交表单 117 document.getElementById("searchForm").submit(); 118 }else{ 119 //不是数字，清空输入内容 120 document.getElementById("jumpPage").value = ""; 121 } 122 } 123 } 124 } 125 function pageLink(yema){ 126 var currentPage = document.getElementById("currentPage"); 127 currentPage.value = yema; 128 //提交表单 129 document.getElementById("searchForm").submit(); 130 } 131 function deleteUser(id) { 132 if(confirm("确定要删除改用户吗？")){ 133 location.href = "/deleteServlet?id=" + id; 134 } 135 } 136 function submitDelSelected(){ 137 //判断是否选择了删除项 138 var hasSelected = false; 139 var ids = document.getElementsByName("id"); 140 for (var i = 0; i < ids.length; i++) { 141 if(ids[i].checked == true){ 142 hasSelected = true; 143 break; 144 } 145 } 146 if(hasSelected){ 147 //需要用户确认 148 if(confirm("确定要删除这些用户吗?")){ 149 document.getElementById("delSelectedForm").submit(); 150 } 151 }else{ 152 //给出还没有选择的提示 153 confirm("请先选择需要删除的用户"); 154 } 155 } 156 </script> 157 </head> 158 <body> 159 <div class="container"> 160 161 <h3 style="text-align: center">用户信息列表</h3> 162 163 <%--<div class="btn-group" role="group" aria-label="...">--%> 164 <%--<button type="button" class="btn btn-default">Left</button>--%> 165 <%--<button type="button" class="btn btn-default">Middle</button>--%> 166 <%--<button type="button" class="btn btn-default">Right</button>--%> 167 <%--</div>--%> 168 <div class="tool mb-10"> 169 <form id="searchForm" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post" class="form-inline float-left"> 170 <input type="hidden" id="currentPage" name="currentPage" value="${userPage.currentPage}"> 171 <div class="form-group"> 172 <label for="name">姓名</label> 173 <input type="text" value="${searchCondition.name[0]}" class="form-control" id="name" name="name"> 174 </div> 175 <div class="form-group"> 176 <label for="address">籍贯</label> 177 <input type="text" class="form-control" value="${searchCondition.address[0]}" id="address" name="address"> 178 </div> 179 <div class="form-group"> 180 <label for="email">邮箱</label> 181 <input type="email" class="form-control" value="${searchCondition.email[0]}" id="email" name="email"> 182 </div> 183 <button type="submit" class="btn btn-default">查询</button> 184 </form> 185 <div class="right-tool float-right"> 186 <a class="btn btn-primary" href="add.jsp" role="button">添加联系人</a> 187 <a class="btn btn-primary" href="javascript: submitDelSelected();" role="button">删除选中</a> 188 <form action="${pageContext.request.contextPath}/delSelectedServlet" method="post" id="delSelectedForm"></form> 189 <%--<button type="button" class="btn btn-primary">添加联系人</button>--%> 190 <%--<button type="button" class="btn btn-primary">删除选中</button>--%> 191 </div> 192 </div> 193 <table border="1" class="table table-bordered table-hover"> 194 <tr class="success"> 195 <th><input type="checkbox" id="firstCb"></th> 196 <th>编号</th> 197 <th>姓名</th> 198 <th>性别</th> 199 <th>年龄</th> 200 <th>籍贯</th> 201 <th>QQ</th> 202 <th>邮箱</th> 203 <th>操作</th> 204 </tr> 205 <c:forEach items="${userPage.pageData}" var="user" varStatus="vs"> 206 <tr> 207 <td><input form="delSelectedForm" type="checkbox" name="id" value="${user.id}"></td> 208 <td>${vs.count}</td> 209 <td>${user.name}</td> 210 <td>${user.gender}</td> 211 <td>${user.age}</td> 212 <td>${user.address}</td> 213 <td>${user.qq}</td> 214 <td>${user.email}</td> 215 <td><a class="btn btn-default btn-sm" href="/findUserServlet?id=${user.id}">修改</a> <a class="btn btn-default btn-sm" href="javascript: deleteUser(${user.id});">删除</a></td> 216 </tr> 217 </c:forEach> 218 </table> 219 220 <nav> 221 <ul class="pagination"> 222 223 <c:if test="${userPage.currentPage == 1}"> 224 <li class="disabled"> 225 </c:if> 226 <c:if test="${userPage.currentPage != 1}"> 227 <li> 228 </c:if> 229 <a href="javascript: pageLink(1);" aria-label="Previous"> 230 <span aria-hidden="true">首页</span> 231 </a> 232 </li> 233 234 <c:if test="${userPage.currentPage == 1}"> 235 <li class="disabled"> 236 </c:if> 237 <c:if test="${userPage.currentPage != 1}"> 238 <li> 239 </c:if> 240 <a href="javascript: pageLink(${userPage.currentPage - 1});" aria-label="Previous"> 241 <span aria-hidden="true">上一页</span> 242 </a> 243 </li> 244 <c:forEach begin="1" end="${userPage.totalPage}" var="i"> 245 <c:if test="${userPage.currentPage == i}"> 246 <li class="active"> 247 </c:if> 248 <c:if test="${userPage.currentPage != i}"> 249 <li> 250 </c:if> 251 <a href="javascript: pageLink(${i});">${i}</a></li> 252 </c:forEach> 253 <c:if test="${userPage.currentPage == userPage.totalPage}"> 254 <li class="disabled"> 255 </c:if> 256 <c:if test="${userPage.currentPage != userPage.totalPage}"> 257 <li> 258 </c:if> 259 <a href="javascript: pageLink(${userPage.currentPage + 1})" aria-label="Next"> 260 <span aria-hidden="true">下一页</span> 261 </a> 262 </li> 263 264 <c:if test="${userPage.currentPage == userPage.totalPage}"> 265 <li class="disabled"> 266 </c:if> 267 <c:if test="${userPage.currentPage != userPage.totalPage}"> 268 <li> 269 </c:if> 270 <a href="javascript: pageLink(${userPage.totalPage})" aria-label="Next"> 271 <span aria-hidden="true">末页</span> 272 </a> 273 </li> 274 275 276 <span class="total-page">共${userPage.totalCount}条记录，共${userPage.totalPage}页</span> 277 <select form="searchForm" id="pageSizeSelect" name="pageSize" class="pageSize form-control"> 278 <option value="3">3</option> 279 <option value="5">5</option> 280 <option value="8">8</option> 281 <option value="10">10</option> 282 <option value="15">15</option> 283 </select> 284 </ul> 285 跳转到 <input id="jumpPage" class="form-control jumpPage" type="text"> 286 </nav> 287 </div> 288 </body> 289 </html>
1 <%-- 2 Created by IntelliJ IDEA. 3 User: jie 4 Date: 2019/5/10 5 Time: 20:00 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 10 <!DOCTYPE html> 11 <!-- 网页使用的语言 --> 12 <html lang="zh-CN"> 13 <head> 14 <!-- 指定字符集 --> 15 <meta charset="utf-8"> 16 <!-- 使用Edge最新的浏览器的渲染方式 --> 17 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 18 <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。 19 width: 默认宽度与设备的宽度相同 20 initial-scale: 初始的缩放比，为1:1 --> 21 <meta name="viewport" content="width=device-width, initial-scale=1"> 22 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 23 <title>用户信息管理系统</title> 24 25 <!-- 1. 导入CSS的全局样式 --> 26 <link href="css/bootstrap.min.css" rel="stylesheet"> 27 <!-- 2. jQuery导入，建议使用1.9以上的版本 --> 28 <script src="js/jquery-2.1.0.min.js"></script> 29 <!-- 3. 导入bootstrap的js文件 --> 30 <script src="js/bootstrap.min.js"></script> 31 <style type="text/css"> 32 td, th { 33 text-align: center; 34 } 35 .mb-10{ 36 margin-bottom: 10px; 37 } 38 .float-right{ 39 float: right; 40 } 41 .float-left{ 42 float: left; 43 } 44 .tool::after{ 45 content: ‘‘; 46 display: block; 47 clear: both; 48 } 49 .table>tbody>tr>td{ 50 vertical-align: middle; 51 } 52 .total-page{ 53 margin-top: 5px; 54 display: inline-block; 55 margin-left: 15px; 56 font-size: 16px; 57 } 58 .pageSize{ 59 display: inline-block; 60 width: auto; 61 margin: 0px 10px; 62 } 63 .jumpPage{ 64 display: inline-block; 65 width: 50px; 66 } 67 </style> 68 <script> 69 70 window.onload = function () { 71 /* 72 全选和全部选功能实现 73 1为firstCb绑定单击事件 74 3获取所有的复选框，将其状态设置为和firstCb一致 75 */ 76 var firstCb = document.getElementById("firstCb"); 77 // console.log(firstCb.checked); 78 firstCb.onclick = function () { 79 // firstCb.checked = !firstCb.checked; 80 var ids = document.getElementsByName("id"); 81 for (var i = 0; i < ids.length; i++) { 82 ids[i].checked = firstCb.checked; 83 } 84 } 85 86 /* 87 设置页的大小 88 */ 89 document.getElementById("pageSizeSelect").onchange = function(){ 90 //手动提交查询条件表单 91 document.getElementById("searchForm").submit(); 92 }; 93 /* 94 页大小控制的回显 95 */ 96 var pageSizeOptions = document.getElementById("pageSizeSelect").options; 97 for (var i = 0; i < pageSizeOptions.length; i++) { 98 if(pageSizeOptions[i].value == "${userPage.pageSize}"){ 99 pageSizeOptions[i].selected = true; 100 } 101 } 102 /* 103 页面跳转 104 */ 105 document.getElementById("jumpPage").onkeydown = function (ev) { 106 if(ev.keyCode == 13){ 107 //按下回车，将currentPage元素的值设置为输入框的值 108 // var currentPage = document.getElementById("jumpPage").value; 109 // var currentPageEle = document.getElementById("currentPage"); 110 // currentPageEle.value = currentPage; 111 var currentPageValue = document.getElementById("jumpPage").value; 112 //验证输入页码是否是数字 113 if(currentPageValue.match(/^\d+$/)){ 114 //是数字，提交表单 115 document.getElementById("currentPage").value = currentPageValue; 116 //提交表单 117 document.getElementById("searchForm").submit(); 118 }else{ 119 //不是数字，清空输入内容 120 document.getElementById("jumpPage").value = ""; 121 } 122 } 123 } 124 } 125 function pageLink(yema){ 126 var currentPage = document.getElementById("currentPage"); 127 currentPage.value = yema; 128 //提交表单 129 document.getElementById("searchForm").submit(); 130 } 131 function deleteUser(id) { 132 if(confirm("确定要删除改用户吗？")){ 133 location.href = "/deleteServlet?id=" + id; 134 } 135 } 136 function submitDelSelected(){ 137 //判断是否选择了删除项 138 var hasSelected = false; 139 var ids = document.getElementsByName("id"); 140 for (var i = 0; i < ids.length; i++) { 141 if(ids[i].checked == true){ 142 hasSelected = true; 143 break; 144 } 145 } 146 if(hasSelected){ 147 //需要用户确认 148 if(confirm("确定要删除这些用户吗?")){ 149 document.getElementById("delSelectedForm").submit(); 150 } 151 }else{ 152 //给出还没有选择的提示 153 confirm("请先选择需要删除的用户"); 154 } 155 } 156 </script> 157 </head> 158 <body> 159 <div class="container"> 160 161 <h3 style="text-align: center">用户信息列表</h3> 162 163 <%--<div class="btn-group" role="group" aria-label="...">--%> 164 <%--<button type="button" class="btn btn-default">Left</button>--%> 165 <%--<button type="button" class="btn btn-default">Middle</button>--%> 166 <%--<button type="button" class="btn btn-default">Right</button>--%> 167 <%--</div>--%> 168 <div class="tool mb-10"> 169 <form id="searchForm" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post" class="form-inline float-left"> 170 <input type="hidden" id="currentPage" name="currentPage" value="${userPage.currentPage}"> 171 <div class="form-group"> 172 <label for="name">姓名</label> 173 <input type="text" value="${searchCondition.name[0]}" class="form-control" id="name" name="name"> 174 </div> 175 <div class="form-group"> 176 <label for="address">籍贯</label> 177 <input type="text" class="form-control" value="${searchCondition.address[0]}" id="address" name="address"> 178 </div> 179 <div class="form-group"> 180 <label for="email">邮箱</label> 181 <input type="email" class="form-control" value="${searchCondition.email[0]}" id="email" name="email"> 182 </div> 183 <button type="submit" class="btn btn-default">查询</button> 184 </form> 185 <div class="right-tool float-right"> 186 <a class="btn btn-primary" href="add.jsp" role="button">添加联系人</a> 187 <a class="btn btn-primary" href="javascript: submitDelSelected();" role="button">删除选中</a> 188 <form action="${pageContext.request.contextPath}/delSelectedServlet" method="post" id="delSelectedForm"></form> 189 <%--<button type="button" class="btn btn-primary">添加联系人</button>--%> 190 <%--<button type="button" class="btn btn-primary">删除选中</button>--%> 191 </div> 192 </div> 193 <table border="1" class="table table-bordered table-hover"> 194 <tr class="success"> 195 <th><input type="checkbox" id="firstCb"></th> 196 <th>编号</th> 197 <th>姓名</th> 198 <th>性别</th> 199 <th>年龄</th> 200 <th>籍贯</th> 201 <th>QQ</th> 202 <th>邮箱</th> 203 <th>操作</th> 204 </tr> 205 <c:forEach items="${userPage.pageData}" var="user" varStatus="vs"> 206 <tr> 207 <td><input form="delSelectedForm" type="checkbox" name="id" value="${user.id}"></td> 208 <td>${vs.count}</td> 209 <td>${user.name}</td> 210 <td>${user.gender}</td> 211 <td>${user.age}</td> 212 <td>${user.address}</td> 213 <td>${user.qq}</td> 214 <td>${user.email}</td> 215 <td><a class="btn btn-default btn-sm" href="/findUserServlet?id=${user.id}">修改</a> <a class="btn btn-default btn-sm" href="javascript: deleteUser(${user.id});">删除</a></td> 216 </tr> 217 </c:forEach> 218 </table> 219 220 <nav> 221 <ul class="pagination"> 222 223 <c:if test="${userPage.currentPage != 1}"> 224 <li> 225 <a href="javascript: pageLink(1);" aria-label="Previous"> 226 <span aria-hidden="true">首页</span> 227 </a> 228 </li> 229 </c:if> 230 231 <c:if test="${userPage.currentPage != 1}"> 232 <li> 233 <a href="javascript: pageLink(${userPage.currentPage - 1});" aria-label="Previous"> 234 <span aria-hidden="true">上一页</span> 235 </a> 236 </li> 237 </c:if> 238 239 <c:forEach begin="1" end="${userPage.totalPage}" var="i"> 240 <c:if test="${userPage.currentPage == i}"> 241 <li class="active"> 242 </c:if> 243 <c:if test="${userPage.currentPage != i}"> 244 <li> 245 </c:if> 246 <a href="javascript: pageLink(${i});">${i}</a></li> 247 </c:forEach> 248 249 <c:if test="${userPage.currentPage != userPage.totalPage && userPage.totalPage != 0}"> 250 <li> 251 <a href="javascript: pageLink(${userPage.currentPage + 1});" aria-label="Previous"> 252 <span aria-hidden="true">下一页</span> 253 </a> 254 </li> 255 </c:if> 256 257 <c:if test="${userPage.currentPage != userPage.totalPage && userPage.totalPage != 0}"> 258 <li> 259 <a href="javascript: pageLink(${userPage.totalPage});" aria-label="Previous"> 260 <span aria-hidden="true">尾页</span> 261 </a> 262 </li> 263 </c:if> 264 265 <span class="total-page">共${userPage.totalCount}条记录，共${userPage.totalPage}页</span> 266 <select form="searchForm" id="pageSizeSelect" name="pageSize" class="pageSize form-control"> 267 <option value="3">3</option> 268 <option value="5">5</option> 269 <option value="8">8</option> 270 <option value="10">10</option> 271 <option value="15">15</option> 272 </select> 273 </ul> 274 跳转到 <input id="jumpPage" class="form-control jumpPage" type="text"> 275 </nav> 276 </div> 277 </body> 278 </html>
条件分页 分页条件和页参数传递方式一 超链接拼串 方式二 使用查询表单searchForm
标签：javascrip oct change option oca opened 获取 led jquer
原文地址：https://www.cnblogs.com/mozq/p/10865214.html
