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

时间:2023-03-09 22:02:09
JSP页面动态查询添加数据与分页数据显示

1

 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="${pageContext.request.scheme}://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath }/">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/table.css" rel="stylesheet" type="text/css"> <link href="jquery/pagination/pagination.css" rel="stylesheet" type="text/css"/>
<link href="jquery/ui/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/pagination/jquery.pagination.js"></script>
<script type="text/javascript" src="jquery/ui/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui/js/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="jquery/timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/JsUtil.js"></script>
<script type="text/javascript">
$.fx.speeds._default = 1000; $(function(){
//日期显示
$(".time").datetimepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showSecond: true,
timeFormat: 'hh:mm:ss',
});
//分页加载数据
displayData(0);
//回车加载数据
$("#pageNo").keydown(function(event){//event 表示刚刚发生的事件
if(event.keyCode==13){
displayData(this.value-1);
}
});
//操作人员弹出窗口
$("#operatorInfo").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
//点击操作员得到记录
$("#selectOperatorImg").click(function() {
//发送ajax请求,查询所有用户,系统管理员除外
$.getJSON("${pageContext.request.contextPath}/user/getAll.action",{"_":new Date().getTime()},function(jsonObject){
//{"data":[{"operatorNanme":"","orgName":""},{},{}]}
$("#operatorInfo").empty();
var htmlString = "";
htmlString+='<table border="1" width="100%">';
htmlString+='<tr align="center">';
htmlString+='<td>选择</td>';
htmlString+='<td>操作员</td>';
htmlString+='<td>机构</td>';
htmlString+='</tr>'; $.each(jsonObject.data,function(i,n){
htmlString+='<tr align="center">';
htmlString+='<td> <input type="radio" onclick="selectOperator(\''+n.operatorName+'\')"></td>';
htmlString+='<td>'+n.operatorName+'</td>';
htmlString+='<td>'+n.orgName+'</td>';
htmlString+='</tr>';
});
htmlString+='</table>';
$("#operatorInfo").append(htmlString);
});
$( "#operatorInfo" ).dialog( "open" );
return false;
});
});
//单选
function selectOperator(operatorName){
//设置到查询文本框中
$("#operatorName").val(operatorName);
//关闭弹出框
$( "#operatorInfo" ).dialog( "close" );
} //分页查询的方法
function displayData(pageNo){
var pageSize = $("#pageSize").val();
$.ajax({
url:"${pageContext.request.contextPath}/operationLog/getByPage.action",
type:"get",
cache:false,//也可以解决浏览器缓存的问题,另一种方式是加时间戳
data:{
"pageNo":pageNo+1,
"pageSize":pageSize,
"operatorName":$("#operatorName").val(),
"operationType":$("#operationType").val(),
"startTime":$("#startTime").val(),
"endTime":$("#endTime").val()
},
beforeSend:function(){
$("#message").text("正在分页查询请稍后...");
return true;
},
success:function(jsonObject){
//清空tbody
$("#operationLogInfoTBody").empty();
//操作时间 操作员 IP地址 操作模块 操作节点 操作类型
//{"total":100,"dataList":[{"id":"","time":"","operatorName":"","ip":"","module":"","node":"","type":""},{},{}]}
//{"total":0}
if(jsonObject.total==0){
$("#message").text("没有符合条件的记录");
}else{
$("#message").text("查询结果如下");
//拼接字符串
var htmlString = "";
$.each(jsonObject.dataList,function(i,n){
htmlString+="<tr class='odd'>";
htmlString+="<td><span class='box_table_even'> <input type='checkbox' name='id' value='"+n.id+"' /> </span></td>";
htmlString+="<td>"+n.time+"</td>";
htmlString+="<td>"+n.operatorName+"</td>";
htmlString+="<td>"+n.ip+"</td>";
htmlString+="<td>"+n.module+"</td>";
htmlString+="<td>"+n.node+"</td>";
htmlString+="<td>"+n.type+"</td>";
htmlString+="</tr>";
}); //将上面拼接好的html字符串追加到tbody标签中
$("#operationLogInfoTBody").append(htmlString);
} //翻页显示
$("#pagination").pagination(jsonObject.total, {// 总记录条数
callback: displayData,//每次点击翻页按钮的时候,都会自动调用这个回调函数 名字随意取
items_per_page:pageSize, //每页显示多少条数据
current_page:pageNo,//当前页码
link_to:"javascript:void(0)",//只保留超链接的样式,点击超链接的时候执行js代码,但是不跳转到任何资源
num_display_entries:5,//默认显示几个页码
next_text:"下一页",
prev_text:"上一页",
prev_show_always:true,//没有上一页的时候是否还显示按钮
next_show_always:true,//没有上一页的时候是否还显示按钮
num_edge_entries:2,//页码多的时候省略
ellipse_text:"..."
}); //显示总记录条数
$("#total").text(jsonObject.total);
//显示总页数
var pageCount = jsonObject.total%pageSize==0?jsonObject.total/pageSize:parseInt(jsonObject.total/pageSize)+1;
$("#pageCount").text(pageCount);
}
});
}
</script>
</head> <body>
<div id="operatorInfo" title="选择操作员">
</div>
<table border="0" cellpadding="0" cellspacing="0" class="table_border">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="table_right">
<tr>
<td width="25" height="26" align="right"><img
src="data:images/ico_location.gif" width="16" height="15" /></td>
<td><font style="font-size: 12px;"><strong>位置:</strong>首页&gt;系统管理&gt;日志管理&gt;操作日志管理</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" class="table_padding">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0"
class="table_border">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="table_right">
<tr>
<td height="26" class="font_left"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0"
class="box_table" id="box_table">
<thead>
<tr>
<td width="105" class="box_table_even">操作员 :</td>
<td width="658" class="box_table_odd">
<span class="in">
<input type="text" id="operatorName"/>
<img src="data:images/3_r11_c21.jpg" id="selectOperatorImg" alt="aa" width="16" height="16" class="refButtonClass" style="cursor: pointer;"/>
</span>
</td>
<td width="268" class="box_table_even">操作类型 :</td>
<td width="212" class="box_table_odd">
<select id="operationType">
<option value="">--请选择--</option>
<option value="新增">新增</option>
<option value="删除">删除</option>
<option value="修改">修改</option>
</select>
</td>
<td width="105" class="box_table_odd">&nbsp;</td>
</tr>
<tr>
<td class="box_table_even">日期 :</td>
<td class="box_table_odd">
<input type="text" class="time" id="startTime"/>
<img src="data:images/kalendar1button.gif" width="25" height="21" align="absmiddle" />
<input class="time" type="text" id="endTime"/>
<img src="data:images/kalendar1button.gif" width="25" height="21" align="absmiddle" />
</td>
<td class="box_table_even">&nbsp;</td>
<td class="box_table_odd">&nbsp;</td>
<td class="box_table_odd">
<span class="font_middle">
<input type="button" value="查询" onclick="displayData(0)"/>
</span>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0"
class="table_border">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0"
class="table_right">
<tr>
<td height="26" align="right">
<span class="font_right">
<span id="message" style="color: red;font-size: 12px"></span>
<input type="button" value="查看明细" onclick="window.location.href='operationLog/detail.action';" />
<%-- <input type="button" value="导出" onclick="window.location.href='${pageContext.request.contextPath}/operationLog/exportExcel.action';"/>--%>
<input type="button" value="导出" onclick="window.location.href='${pageContext.request.contextPath}/operationLog/exportCSV.action';"/>
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0"
id="box_num_table2" class="box_num_table">
<thead>
<tr>
<td>&nbsp;</td>
<td>操作时间</td>
<td>操作员</td>
<td>IP地址</td>
<td>操作模块</td>
<td>操作节点</td>
<td>操作类型</td>
</tr>
</thead>
<tbody id="operationLogInfoTBody">
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<%@ include file="/WEB-INF/jsp/common/pageFoot.jsp" %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

2.分页工具栏

 <%@ page language="java" contentType="text/html; charset=UTF-8"%>
<table width="100%" height="30" border="0" cellpadding="0"
cellspacing="0" class="page_table">
<tr>
<td width="8%" class="font_left">
数据:<span id="total"></span> 条
</td> <td width="12" class="font_left">

</td>
<td width="375" class="font_left">
<input id="pageNo" type="text" size="2" maxlength="4"/>
/<span id="pageCount"></span>页
<input type="image" border="0" src="data:images/go.gif" onclick="displayData($('#pageNo').val()-1)" />
<select id="pageSize" onchange="displayData(0)">
<c:forTokens items="${initParam.pageSizeString }" delims="," var="pageSize">
<option value="${pageSize}">每页${pageSize}条</option>
</c:forTokens>
</select>
</td>
<td width="478" class="font_right">
<div id="pagination"></div>
&nbsp;
<input type="image" class="font_right"
onclick="displayData(0)"
src="data:images/botton_page_refresh.png"
border="0" />
</td>
</tr>
</table>

3.

 public PaginationVO<OperationLog> getByPage(Integer pageNo,
Integer pageSize, String operatorName, String operationType,
String startTime, String endTime) { StringBuilder hql = new StringBuilder("from OperationLog ol join fetch ol.operator where 1=1 ");
List<Object> paramList = new ArrayList<Object>();
if(StringUtil.isNotEmpty(operatorName)){
hql.append(" and ol.operator.name like ?");
paramList.add(operatorName+"%");
} if(StringUtil.isNotEmpty(operationType)){
hql.append(" and ol.type = ?");
paramList.add(operationType);
}
if (StringUtil.isNotEmpty(startTime)) {
hql.append(" and ol.time >= ?");
paramList.add(startTime);
}
if (StringUtil.isNotEmpty(endTime)) {
hql.append(" and ol.time <= ?");
paramList.add(endTime);
}
hql.append(" order by ol.time desc");
Query query = getSession().createQuery(hql.toString());
for (int i = 0; i < paramList.size(); i++) {
query.setParameter(i, paramList.get(i));
}
query.setFirstResult((pageNo-1)*pageSize);
query.setMaxResults(pageSize);
List<OperationLog> dataList = query.list();
//----------------------------------------------------------------
StringBuilder countHql = new StringBuilder("select count(*) from OperationLog ol where 1=1 ");
List<Object> countParamList = new ArrayList<Object>();
if(StringUtil.isNotEmpty(operatorName)){
countHql.append(" and ol.operator.name like ?");
countParamList.add(operatorName+"%");
} if(StringUtil.isNotEmpty(operationType)){
countHql.append(" and ol.type = ?");
countParamList.add(operationType);
}
if (StringUtil.isNotEmpty(startTime)) {
countHql.append(" and ol.time >= ?");
countParamList.add(startTime);
}
if (StringUtil.isNotEmpty(endTime)) {
countHql.append(" and ol.time <= ?");
countParamList.add(endTime);
} Query countQuery = getSession().createQuery(countHql.toString());
for (int i = 0; i < countParamList.size(); i++) {
countQuery.setParameter(i, countParamList.get(i));
}
Long total = (Long) countQuery.uniqueResult(); PaginationVO<OperationLog> paginationVO = new PaginationVO<OperationLog>();
paginationVO.setTotal(total);
paginationVO.setDataList(dataList);
return paginationVO;
}