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; 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 > 164 <input type="hidden" > 165 <div class="form-group"> 166 <label for="name">姓名</label> 167 <input type="text" value="${searchCondition.name[0]}" class="form-control" > 168 </div> 169 <div class="form-group"> 170 <label for="address">籍贯</label> 171 <input type="text" class="form-control" value="${searchCondition.address[0]}" > 172 </div> 173 <div class="form-group"> 174 <label for="email">邮箱</label> 175 <input type="email" class="form-control" value="${searchCondition.email[0]}" > 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" ></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" ></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" > 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 > 256 </nav> 257 </div> 258 </body> 259 </html>
相关文章：