JSP页面动态查询添加数据与分页数据显示

1

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
  2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3 
  4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  5 <html>
  6 <head>
  7         <base href="${pageContext.request.scheme}://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/">
  8         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9         <link href="css/style.css" rel="stylesheet" type="text/css" />
 10         <link href="css/table.css" rel="stylesheet" type="text/css">
 11         
 12         <link href="jquery/pagination/pagination.css" rel="stylesheet" type="text/css"/>
 13         <link href="jquery/ui/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
 14         <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
 15         <script type="text/javascript" src="jquery/pagination/jquery.pagination.js"></script>
 16         <script type="text/javascript" src="jquery/ui/js/jquery-ui-1.8.18.custom.min.js"></script>
 17         <script type="text/javascript" src="jquery/ui/js/jquery.ui.datepicker-zh-CN.js"></script>
 18         <script type="text/javascript" src="jquery/timepicker/jquery-ui-timepicker-addon.js"></script>
 19         <script type="text/javascript" src="js/JsUtil.js"></script>
 20         <script type="text/javascript">
 21             $.fx.speeds._default = 1000;
 22             
 23             $(function(){
 24                 //日期显示
 25                 $(".time").datetimepicker({
 26                     changeMonth: true,
 27                     changeYear: true,
 28                     showButtonPanel: true,
 29                     showSecond: true,
 30                     timeFormat: 'hh:mm:ss',
 31                 });
 32                 //分页加载数据
 33                 displayData(0);
 34                 //回车加载数据
 35                 $("#pageNo").keydown(function(event){//event   表示刚刚发生的事件  
 36                     if(event.keyCode==13){
 37                         displayData(this.value-1);
 38                     }
 39                 });
 40                 //操作人员弹出窗口
 41                 $("#operatorInfo").dialog({
 42                     autoOpen: false,
 43                     show: "blind",
 44                     hide: "explode"
 45                 });
 46                 //点击操作员得到记录
 47                 $("#selectOperatorImg").click(function() {
 48                     //发送ajax请求,查询所有用户,系统管理员除外
 49                     $.getJSON("${pageContext.request.contextPath}/user/getAll.action",{"_":new Date().getTime()},function(jsonObject){
 50                         //{"data":[{"operatorNanme":"","orgName":""},{},{}]}
 51                         $("#operatorInfo").empty();
 52                         var htmlString = "";
 53                         htmlString+='<table border="1" width="100%">';
 54                         htmlString+='<tr align="center">';
 55                         htmlString+='<td>选择</td>';
 56                         htmlString+='<td>操作员</td>';
 57                         htmlString+='<td>机构</td>';
 58                         htmlString+='</tr>';
 59                         
 60                         $.each(jsonObject.data,function(i,n){
 61                             htmlString+='<tr align="center">';
 62                             htmlString+='<td> <input type="radio" onclick="selectOperator(\''+n.operatorName+'\')"></td>';
 63                             htmlString+='<td>'+n.operatorName+'</td>';
 64                             htmlString+='<td>'+n.orgName+'</td>';
 65                             htmlString+='</tr>';
 66                         });
 67                         htmlString+='</table>';
 68                         $("#operatorInfo").append(htmlString);
 69                     });
 70                     $( "#operatorInfo" ).dialog( "open" );
 71                     return false;
 72                 });
 73             });
 74             //单选
 75             function selectOperator(operatorName){
 76                 //设置到查询文本框中
 77                 $("#operatorName").val(operatorName);
 78                 //关闭弹出框
 79                 $( "#operatorInfo" ).dialog( "close" );
 80             }
 81             
 82             //分页查询的方法
 83             function displayData(pageNo){
 84                 var pageSize = $("#pageSize").val();
 85                 $.ajax({
 86                     url:"${pageContext.request.contextPath}/operationLog/getByPage.action",
 87                     type:"get",
 88                     cache:false,//也可以解决浏览器缓存的问题,另一种方式是加时间戳
 89                     data:{
 90                         "pageNo":pageNo+1,
 91                         "pageSize":pageSize,
 92                         "operatorName":$("#operatorName").val(),
 93                         "operationType":$("#operationType").val(),
 94                         "startTime":$("#startTime").val(),
 95                         "endTime":$("#endTime").val()
 96                     },
 97                     beforeSend:function(){
 98                         $("#message").text("正在分页查询请稍后...");
 99                         return true;
100                     },
101                     success:function(jsonObject){
102                         //清空tbody
103                         $("#operationLogInfoTBody").empty();
104                         //操作时间     操作员     IP地址     操作模块     操作节点     操作类型
105                         //{"total":100,"dataList":[{"id":"","time":"","operatorName":"","ip":"","module":"","node":"","type":""},{},{}]}
106                         //{"total":0}
107                         if(jsonObject.total==0){
108                             $("#message").text("没有符合条件的记录");
109                         }else{
110                             $("#message").text("查询结果如下");
111                             //拼接字符串
112                             var htmlString = "";
113                             $.each(jsonObject.dataList,function(i,n){
114                                 htmlString+="<tr class='odd'>";
115                                 htmlString+="<td><span class='box_table_even'> <input type='checkbox' name='id' value='"+n.id+"' /> </span></td>";
116                                 htmlString+="<td>"+n.time+"</td>";
117                                 htmlString+="<td>"+n.operatorName+"</td>";
118                                 htmlString+="<td>"+n.ip+"</td>";
119                                 htmlString+="<td>"+n.module+"</td>";
120                                 htmlString+="<td>"+n.node+"</td>";
121                                 htmlString+="<td>"+n.type+"</td>";
122                                 htmlString+="</tr>";
123                             });
124                             
125                             //将上面拼接好的html字符串追加到tbody标签中
126                             $("#operationLogInfoTBody").append(htmlString);
127                         }
128                         
129                         //翻页显示
130                          $("#pagination").pagination(jsonObject.total, {// 总记录条数
131                                callback: displayData,//每次点击翻页按钮的时候,都会自动调用这个回调函数 名字随意取
132                                items_per_page:pageSize, //每页显示多少条数据
133                                current_page:pageNo,//当前页码
134                                link_to:"javascript:void(0)",//只保留超链接的样式,点击超链接的时候执行js代码,但是不跳转到任何资源
135                                num_display_entries:5,//默认显示几个页码
136                                next_text:"下一页",
137                                prev_text:"上一页",
138                                prev_show_always:true,//没有上一页的时候是否还显示按钮
139                                next_show_always:true,//没有上一页的时候是否还显示按钮
140                                num_edge_entries:2,//页码多的时候省略
141                                ellipse_text:"..."
142                            });
143                            
144                         //显示总记录条数
145                         $("#total").text(jsonObject.total);
146                         //显示总页数
147                         var pageCount = jsonObject.total%pageSize==0?jsonObject.total/pageSize:parseInt(jsonObject.total/pageSize)+1;
148                         $("#pageCount").text(pageCount);
149                     }
150                 });
151             }
152         </script>
153 </head>
154 
155 <body>
156 <div id="operatorInfo" title="选择操作员">
157 </div>
158 <table border="0" cellpadding="0" cellspacing="0" class="table_border">
159     <tr>
160         <td>
161         <table width="100%" border="0" cellpadding="0" cellspacing="0"
162             class="table_right">
163             <tr>
164                 <td width="25" height="26" align="right"><img
165                     src="images/ico_location.gif" width="16" height="15" /></td>
166                 <td><font style="font-size: 12px;"><strong>位置:</strong>首页&gt;系统管理&gt;日志管理&gt;操作日志管理</font></td>
167             </tr>
168         </table>
169         </td>
170     </tr>
171     <tr>
172         <td>
173         <table width="100%" border="0" cellspacing="0" class="table_padding">
174             <tr>
175                 <td align="center">
176                 <table border="0" cellpadding="0" cellspacing="0"
177                     class="table_border">
178                     <tr>
179                         <td>
180                         <table width="100%" border="0" cellpadding="0" cellspacing="0"
181                             class="table_right">
182                             <tr>
183                                 <td height="26" class="font_left"></td>
184                             </tr>
185                         </table>
186                         </td>
187                     </tr>
188                     <tr>
189                         <td align="center">
190                         <table border="0" cellpadding="0" cellspacing="0"
191                             class="box_table" id="box_table">
192                             <thead>
193                                 <tr>
194                                     <td width="105" class="box_table_even">操作员 :</td>
195                                     <td width="658" class="box_table_odd">
196                                         <span class="in">
197                                             <input type="text" id="operatorName"/> 
198                                             <img src="images/3_r11_c21.jpg" id="selectOperatorImg" alt="aa" width="16" height="16" class="refButtonClass" style="cursor: pointer;"/>
199                                         </span>
200                                     </td>
201                                     <td width="268" class="box_table_even">操作类型 :</td>
202                                     <td width="212" class="box_table_odd">
203                                         <select id="operationType">
204                                             <option value="">--请选择--</option>
205                                             <option value="新增">新增</option>
206                                             <option value="删除">删除</option>
207                                             <option value="修改">修改</option>
208                                         </select>
209                                     </td>
210                                     <td width="105" class="box_table_odd">&nbsp;</td>
211                                 </tr>
212                                 <tr>
213                                     <td class="box_table_even">日期 :</td>
214                                     <td class="box_table_odd">
215                                         <input type="text" class="time" id="startTime"/> 
216                                         <img src="images/kalendar1button.gif" width="25" height="21" align="absmiddle" /> 
217                                         <input class="time" type="text" id="endTime"/>
218                                         <img src="images/kalendar1button.gif" width="25" height="21" align="absmiddle" />
219                                     </td>
220                                     <td class="box_table_even">&nbsp;</td>
221                                     <td class="box_table_odd">&nbsp;</td>
222                                     <td class="box_table_odd">
223                                         <span class="font_middle">
224                                             <input type="button" value="查询" onclick="displayData(0)"/>
225                                         </span>
226                                     </td>
227                                 </tr>
228                             </thead>
229                             <tbody>
230                             </tbody>
231                         </table>
232                         </td>
233                     </tr>
234                 </table>
235                 <table border="0" cellpadding="0" cellspacing="0"
236                     class="table_border">
237                     <tr>
238                         <td>
239                         <table width="100%" border="0" cellpadding="0" cellspacing="0"
240                             class="table_right">
241                             <tr>
242                                 <td height="26" align="right">
243                                     <span class="font_right">
244                                         <span id="message" style="color: red;font-size: 12px"></span>
245                                         <input type="button" value="查看明细" onclick="window.location.href='operationLog/detail.action';" /> 
246                                         <%-- <input type="button" value="导出" onclick="window.location.href='${pageContext.request.contextPath}/operationLog/exportExcel.action';"/>--%> 
247                                         <input type="button" value="导出" onclick="window.location.href='${pageContext.request.contextPath}/operationLog/exportCSV.action';"/> 
248                                     </span>
249                                 </td>
250                             </tr>
251                         </table>
252                         </td>
253                     </tr>
254                     <tr>
255                         <td>
256                         <table width="100%" border="0" cellspacing="0" cellpadding="0">
257                             <tr>
258                                 <td align="center">
259                                 <table border="0" cellpadding="0" cellspacing="0"
260                                     id="box_num_table2" class="box_num_table">
261                                     <thead>
262                                         <tr>
263                                             <td>&nbsp;</td>
264                                             <td>操作时间</td>
265                                             <td>操作员</td>
266                                             <td>IP地址</td>
267                                             <td>操作模块</td>
268                                             <td>操作节点</td>
269                                             <td>操作类型</td>
270                                         </tr>
271                                     </thead>
272                                     <tbody id="operationLogInfoTBody">
273                                     </tbody>
274                                 </table>
275                                 </td>
276                             </tr>
277                             <tr>
278                                 <td>
279                                     <%@ include file="/WEB-INF/jsp/common/pageFoot.jsp" %>
280                                 </td>
281                             </tr>
282                         </table>
283                         </td>
284                     </tr>
285                 </table>
286                 </td>
287             </tr>
288         </table>
289         </td>
290     </tr>
291 </table>
292 </body>
293 </html>

 

 

2.分页工具栏

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
 2 <table width="100%" height="30" border="0" cellpadding="0"
 3     cellspacing="0" class="page_table">
 4     <tr>
 5         <td width="8%" class="font_left">
 6             数据:<span id="total"></span> 7         </td>
 8         
 9         <td width="12" class="font_left">
10 11         </td>
12         <td width="375" class="font_left">
13             <input id="pageNo" type="text" size="2" maxlength="4"/>
14             /<span id="pageCount"></span>15             <input type="image" border="0"  src="images/go.gif" onclick="displayData($('#pageNo').val()-1)" />
16               <select id="pageSize" onchange="displayData(0)">
17                   <c:forTokens items="${initParam.pageSizeString }" delims="," var="pageSize">
18                       <option value="${pageSize}">每页${pageSize}条</option>
19                   </c:forTokens>
20               </select>
21         </td>
22         <td width="478" class="font_right">
23             <div id="pagination"></div>
24             &nbsp;
25             <input type="image" class="font_right"
26                 onclick="displayData(0)"
27                 src="images/botton_page_refresh.png"
28                  border="0" />
29         </td>
30     </tr>
31 </table>

 

 

3.

 1 public PaginationVO<OperationLog> getByPage(Integer pageNo,
 2             Integer pageSize, String operatorName, String operationType,
 3             String startTime, String endTime) {
 4         
 5         StringBuilder hql = new StringBuilder("from OperationLog ol join fetch ol.operator where 1=1 ");
 6         List<Object> paramList = new ArrayList<Object>();
 7         if(StringUtil.isNotEmpty(operatorName)){
 8             hql.append(" and ol.operator.name like ?");
 9             paramList.add(operatorName+"%");
10         }
11         
12         if(StringUtil.isNotEmpty(operationType)){
13             hql.append(" and ol.type = ?");
14             paramList.add(operationType);
15         }
16         if (StringUtil.isNotEmpty(startTime)) {
17             hql.append(" and ol.time >= ?");
18             paramList.add(startTime);
19         }
20         if (StringUtil.isNotEmpty(endTime)) {
21             hql.append(" and ol.time <= ?");
22             paramList.add(endTime);
23         }
24         hql.append(" order by ol.time desc");
25         Query query = getSession().createQuery(hql.toString());
26         for (int i = 0; i < paramList.size(); i++) {
27             query.setParameter(i, paramList.get(i));
28         }
29         query.setFirstResult((pageNo-1)*pageSize);
30         query.setMaxResults(pageSize);
31         List<OperationLog> dataList = query.list();
32         //----------------------------------------------------------------
33         StringBuilder countHql = new StringBuilder("select count(*) from OperationLog ol where 1=1 ");
34         List<Object> countParamList = new ArrayList<Object>();
35         if(StringUtil.isNotEmpty(operatorName)){
36             countHql.append(" and ol.operator.name like ?");
37             countParamList.add(operatorName+"%");
38         }
39         
40         if(StringUtil.isNotEmpty(operationType)){
41             countHql.append(" and ol.type = ?");
42             countParamList.add(operationType);
43         }
44         if (StringUtil.isNotEmpty(startTime)) {
45             countHql.append(" and ol.time >= ?");
46             countParamList.add(startTime);
47         }
48         if (StringUtil.isNotEmpty(endTime)) {
49             countHql.append(" and ol.time <= ?");
50             countParamList.add(endTime);
51         }
52         
53         Query countQuery = getSession().createQuery(countHql.toString());
54         for (int i = 0; i < countParamList.size(); i++) {
55             countQuery.setParameter(i, countParamList.get(i));
56         }
57         Long total = (Long) countQuery.uniqueResult();
58         
59         PaginationVO<OperationLog> paginationVO = new PaginationVO<OperationLog>();
60         paginationVO.setTotal(total);
61         paginationVO.setDataList(dataList);
62         return paginationVO;
63     }

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在JSP中实现分页显示数据的步骤如下: 1. 在JSP页面中使用JSTL标签库中的<c:forEach>标签或者JSP自带的<% %>标签,遍历数据集合并将数据显示在页面上。 2. 在页面上添加分页导航条,用于用户切换不同页面的数据。可以通过<a>标签或者<button>标签来实现。 3. 在后台代码中,根据用户请求的当前页码以及每页显示数据量,计算出要显示数据的起始位置和结束位置。 4. 从数据源中查询数据,并根据起始位置和结束位置来限制查询结果的数量。 5. 将查询结果封装成JavaBean对象,然后将JavaBean对象放入请求作用域(request)中,以便在JSP页面中遍历和显示。 6. 在JSP页面中根据分页导航条传递的参数,重新查询数据显示在页面上。 示例代码如下: ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSP分页显示数据</title> </head> <body> <h1>用户列表</h1> <table> <tr> <th>ID</th> <th>用户名</th> <th>邮箱</th> </tr> <c:forEach var="user" items="${users}"> <tr> <td>${user.id}</td> <td>${user.username}</td> <td>${user.email}</td> </tr> </c:forEach> </table> <br> <div> <c:if test="${currentPage > 1}"> <a href="list.jsp?page=${currentPage - 1}">上一页</a> </c:if> <c:forEach begin="1" end="${totalPage}" varStatus="status"> <c:choose> <c:when test="${status.index == currentPage}"> <span>${status.index}</span> </c:when> <c:otherwise> <a href="list.jsp?page=${status.index}">${status.index}</a> </c:otherwise> </c:choose> </c:forEach> <c:if test="${currentPage < totalPage}"> <a href="list.jsp?page=${currentPage + 1}">下一页</a> </c:if> </div> </body> </html> ``` 在后台代码中,我们需要根据参数page和pageSize来计算出要查询数据的起始位置和结束位置,然后从数据源中查询数据,并将查询结果封装成JavaBean对象放入请求作用域中。 ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page import="java.util.List" %> <%@ page import="java.util.ArrayList" %> <%@ page import="com.example.User" %> <% int currentPage = Integer.parseInt(request.getParameter("page")); int pageSize = 10; int totalCount = 100; int totalPage = (totalCount + pageSize - 1) / pageSize; int startIndex = (currentPage - 1) * pageSize; int endIndex = startIndex + pageSize; List<User> users = new ArrayList<User>(); for (int i = startIndex; i < endIndex && i < totalCount; i++) { User user = new User(); user.setId(i + 1); user.setUsername("user" + (i + 1)); user.setEmail("user" + (i + 1) + "@example.com"); users.add(user); } request.setAttribute("users", users); request.setAttribute("currentPage", currentPage); request.setAttribute("totalPage", totalPage); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSP分页显示数据</title> </head> <body> <%@ include file="list.jsp" %> </body> </html> ``` 在JSP页面中,我们需要根据请求作用域中的数据来渲染分页导航条和数据列表。 注意:为了防止SQL注入等安全问题,我们在实际开发中应该使用PreparedStatement来查询数据,并对用户输入的参数进行过滤和验证。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值