条件分页分页条件和页参数传递方式一超链接拼串方式二使用查询表单searchForm...

最新推荐文章于 2022-08-01 19:38:48 发布

diaopitian0181

最新推荐文章于 2022-08-01 19:38:48 发布

阅读量607

点赞数

文章标签： java 开发工具 javascript ViewUI

原文链接：http://www.cnblogs.com/mozq/p/10865214.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  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>&nbsp;<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">&laquo;</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">&raquo;</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>&nbsp;<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>&nbsp;<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>