码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-05-14 23:12:47      阅读:233      评论:0      收藏:0      [点我收藏+]

标签: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>&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>
首页时不显示首页和上一页 尾页时不显示尾页和下一页

 

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

标签:javascrip   oct   change   option   oca   opened   获取   led   jquer   

原文地址:https://www.cnblogs.com/mozq/p/10865214.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!