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

  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>

首页时不显示首页和上一页 尾页时不显示尾页和下一页

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

时间： 2024-10-10 02:24:59

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

带条件的分页

一.后台 ①分类的list .jsp中的流程控制改成JSTL实现 <script type ="text/javascript" src="script/jquery-1.7.2.js"></script> <script type ="text/javascript"> $ (function (){ $ (".del").click(function(){ var $td = $(thi

hibernate中带查询条件的分页

所谓分页,从数据库中分,则是封装一个分页类.利用分页对象进行分页. 但,分页往往带查询条件. 分页类的三个重要数据:[当前页码数],[数据库中的总记录数],[每页显示的数据的条数] 原理:select * from  [表名] where   [字段名]  like   ['%条件%']    limit  [开始查询的索引],[每页显示的数据] 带查询条件的分页分两步 (1)第一步:查询出符合条件的数据的总条数 ---->select count(*) from [表名] where  [字段

数据库中复杂的联查+筛选条件+排序+分页

数据库中复杂的联查+筛选条件+排序+分页一直是比较头疼的问题 为了模拟这个问题,首先建立两个表 create table t_userType ( id int identity(1,1) not null primary key, name varchar(50) ) GO create table t_user ( id int identity(1,1) not null primary key, t_userTypeId int not null, name varchar(50), f

动态多条件查询分页以及排序(一)--MVC与Entity Framework版url分页版

一.前言 多条件查询分页以及排序  每个系统里都会有这个的代码 做好这块 可以大大提高开发效率  所以博主分享下自己的6个版本的 多条件查询分页以及排序 二.目前状况 不论是ado.net 还是EF 在做多条件搜索时 都有这类似的代码 这样有几个不好的地方 1.当增加查询条件,需要改代码,对应去写相应的代码. 2.对多表查询以及or的支持 不是很好.而我们很常见的需求不可能是一个表的查询 3. 这样写表示层直接出现 了SQL语句 或者 linq 的拉姆达表达式  这是很不好的 表示层不应该知道数

javaWeb核心技术第十二篇之分页和条件

分页:limit ?,? 参数1 : startIndex 开始索引. 参数2 : pageSize 每页显示的个数 n 表示第几页 给定一个特殊的单词 pageNumber select * from product; 第一页显示五条数据: select * from product LIMIT 0 , 5; 第二页显示五条数据 select * from product LIMIT 5 , 5; 第三页显示五条数据 select * from product LIMIT 10 , 5; 第N

springboot+thymeleaf处理带搜索条件的分页问题解决思路

一开始写项目的时候,没用ajax,导致做搜索分页功能的时候废了好大的劲,在这里分享一下处理这个问题的思路. 框架用的springboot,通过thymeleaf模板和前端交互,没有使用ajax,所以数据都是在域对象放的.分页用的springdatajpa的分页,他个其他的分页工具大同小异,优点在于不用在引入新的依赖,直接通过查询得到的就是Page对象,缺点就是springdatajpa自带的分页工具其起始页是从0开始的,这一点比较恶心,哈哈. 主要思路就是把搜索条件和分页的请求地址都在域中定义,

jdbc案例_分页_条件查询

客户信息增删改查系统 软件工程开发流程:1.瀑布模型 2.螺旋模型 RUP (Rational Unified Process,统一软件开发过程 ) 采用瀑布模型: 需求 --- 需求分析 --- 系统设计(概要.详细设计)---- 编码 --- 测试 --- 实施 --- 维护 * 瀑布模型 缺陷在编码结束之前,客户看不到最终软件产品 ,如果需求.设计出现明显错漏,导致软件后期无法维护,存在重大缺陷 * 瀑布模型对于 新型软件,需求不定软件 风险较大 敏捷开发理念:迭代开发模式 ,将系统功能分

带条件的分页【重点】

二.前台 1.不带条件的查询 [1 ]实现Dao方法:getPageList ().getTotalItemNum () ◆在BookDao中写接口方法 /** * 获取在指定条件下的分页数据 * @param pageNo 不能使用pageCondition返回的pageNoStr.要使用经过Page对象纠正的 * @param pageSize * @param pageCondition * @return */ List<Book> getPageList (int pageNo, i

EF实现分页查询+条件查询+排序

先来看看几个LINQ to SQL的几个函数. Take 说明:获取集合的前n个元素:延迟.即只返回限定数量的结果集. var q = (  from e in db.Employees  orderby e.HireDate  select e)  .Take(5); 语句描述:选择所雇用的前5个雇员. Skip  说明:跳过集合的前n个元素:延迟.即我们跳过给定的数目返回后面的结果集. var q = (  from p in db.Products  orderby p.UnitPrice