父页面jsp的代码如下,其中核心是getDate这个js方法,中间一段业务不用看,核心代码在于使用ajax技术实现的获取数据并将其显示于一个子页面的过程,就是下面这两个js方法:
function queryReport() {
var startDate = jQuery.trim(jQuery("#startDate").val());
var endDate = jQuery.trim(jQuery("#endDate").val());
getData(startDate, endDate, 20, 1);
}
function getData(startDate, endDate, numOfPage, pageNum) {
jQuery.ajaxSetup({
cache : false
});
jQuery.get("${ctx}/queryLoginCount.action", {
startDate : startDate,
endDate : endDate,
numOfPage : numOfPage,
pageNum : pageNum
}, function(data) {
jQuery("#reportDiv").html(data);
});
}
下面是整个父页面jsp的代码:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%
response.addHeader(
"P3P",
"CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录日志详情</title>
<link rel="stylesheet" href="${ctx }/css/base/jquery.ui.all.css">
<link rel="stylesheet" href="${ctx }/css/common.css">
<script src="${ctx}/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery-ui-1.8.15.custom.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
<script type="text/javascript">
Date.prototype.format = function(format) {
var o = {
"M+" : this.getMonth() + 1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
"S" : this.getMilliseconds() //millisecond
};
if (/(y+)/.test(format))
format = format.replace(RegExp.$1, (this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
for ( var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
: ("00" + o[k]).substr(("" + o[k]).length));
return format;
};
function queryReport() {
var startDate = jQuery.trim(jQuery("#startDate").val());
var endDate = jQuery.trim(jQuery("#endDate").val());
getData(startDate, endDate, 20, 1);
}
function getData(startDate, endDate, numOfPage, pageNum) {
jQuery.ajaxSetup({
cache : false
});
var date_start = new Date();
var date_end = new Date();
var thisTime = 14 * 24 * 60 * 60 * 1000;
date_start.setFullYear(startDate.substring(0, 4));
date_start.setMonth(startDate.substring(5, 7));
date_start.setDate(startDate.substring(8, 10));
date_end.setFullYear(endDate.substring(0, 4));
date_end.setMonth(endDate.substring(5, 7));
date_end.setDate(endDate.substring(8, 10));
if (startDate != null && startDate != '') {
if (endDate != null && endDate != '') {
if (startDate > endDate) {
alert('起始日期已经大于截止日期!');
} else {
if ((date_end - date_start) <= thisTime) {
jQuery.get("${ctx}/queryLoginCount.action", {
startDate : startDate,
endDate : endDate,
numOfPage : numOfPage,
pageNum : pageNum
}, function(data) {
jQuery("#reportDiv").html(data);
});
} else {
alert("请查询两周内的数据!");
}
}
} else {
date_start = new Date(date_start.getFullYear(), date_start
.getMonth() - 1, date_start.getDate());
date_end = new Date(date_start.getFullYear(), date_start
.getMonth(), date_start.getDate() + 14);
date_start = date_start.format('yyyy-MM-dd');
date_end = date_end.format('yyyy-MM-dd');
jQuery.get("${ctx}/queryLoginCount.action", {
startDate : date_start,
endDate : date_end,
numOfPage : numOfPage,
pageNum : pageNum
}, function(data) {
jQuery("#reportDiv").html(data);
});
}
} else {
if (endDate != null && endDate != '') {
date_end = new Date(date_end.getFullYear(),
date_end.getMonth() - 1, date_end.getDate());
date_start = new Date(date_end.getFullYear(), date_end
.getMonth(), date_end.getDate() - 14);
date_end = date_end.format('yyyy-MM-dd');
date_start = date_start.format('yyyy-MM-dd');
jQuery.get("${ctx}/queryLoginCount.action", {
startDate : date_start,
endDate : date_end,
numOfPage : numOfPage,
pageNum : pageNum
}, function(data) {
jQuery("#reportDiv").html(data);
});
} else {
var date_start = new Date();
var date_end = new Date();
date_start = new Date(date_start.getFullYear(), date_start
.getMonth(), date_start.getDate() - 14);
date_start = date_start.format('yyyy-MM-dd');
date_end = date_end.format('yyyy-MM-dd');
jQuery.get("${ctx}/queryLoginCount.action", {
startDate : date_start,
endDate : date_end,
numOfPage : numOfPage,
pageNum : pageNum
}, function(data) {
jQuery("#reportDiv").html(data);
});
}
}
}
</script>
</head>
<body>
<table id="inputTable" width="100%" border="1" align="center"
class="add_table">
<tr>
<td width="30%" class="addtable_left"><label>统计时间:</label></td>
<td align="left" width="40%" class="tdright"><input
id="startDate" name="startDate" class="Wdate" type="text"
onClick="WdatePicker()" value="${startDate}" class="text">—<input
id="endDate" name="endDate" class="Wdate" type="text"
onClick="WdatePicker()" value="${endDate}" class="text"></td>
<td colspan="4"><input value="查询" onclick="queryReport()"
type="button" class="right-button02"></td>
</tr>
</table>
<div id="reportDiv" style="overflow: auto; height: 300px;"></div>
</body>
<script type="text/javascript">
$(function() {
var frame = jQuery(window.parent.document).find("iframe")[0];
var frameHeight = jQuery(frame).height();
var inputTableHeight = jQuery("#inputTable").height();
jQuery("#reportDiv").css({
height : frameHeight - inputTableHeight - 20
});
//当窗口缩放时以上两种情况自适应
window.onresize = function() {
var frame = jQuery(window.parent.document).find("iframe")[0];
var frameHeight = jQuery(frame).height();
var inputTableHeight = jQuery("#inputTable").height();
jQuery("#reportDiv").css({
height : frameHeight - inputTableHeight - 20
});
};
});
</script>
</html>
然后子页面有分页的实现:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
response.addHeader(
"P3P",
"CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR");
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>次数统计</title>
<link rel="stylesheet" href="${ctx }/css/base/jquery.ui.all.css">
<link rel="stylesheet" href="${ctx }/css/common.css">
<script src="${ctx}/js/swfobject.js" type="text/javascript"></script>
<script src="${ctx}/js/json2.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery.scrollLoading-min.js" type="text/javascript"></script>
<script type="text/javascript">
function openLoginResultInfoWindow(LOG_DATE){
window.open('${ctx}/queryLoginCountInfo.action?logDate='+LOG_DATE, 'newwindow', 'height=400, width=600, top=100, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no, status=no');
}
var url="${ctx}/countBarChart.action?startDate=${startDate}&endDate=${endDate}";
url=encodeURI(url);
url=url.replace(/&/g,'%26').toString();
swfobject.embedSWF("<s:url value="/js/open-flash-chart.swf"/>", "my_chart", "98%", "300", "9.0.0",
"<s:url value="/js/expressInstall.swf"/>",
{"data-file":url},
{wmode:"transparent"});
function firstPage() {
getData('${startDate}', '${endDate}', 20, 1);
}
//上一页
function lastPage() {
getData('${startDate}', '${endDate}', 20,
'${pageNum-1}');
}
//下一页
function nextPage() {
getData('${startDate}', '${endDate}', 20,
'${pageNum+1}');
}
//末页
function endPage() {
getData('${startDate}', '${endDate}', 20,
'${pageCount}');
}
</script>
<style type="text/css">
.href_btn {
cursor: pointer;
color: blue;
text-decoration: underline
}
</style>
</head>
<table width="98%" border="0" cellpadding="0" cellspacing="0"
align="center">
<tr>
<td align="center">
<table width="100%" class="edit_table" style="margin:0 0 0 0;padding:0 0 0 0;" cellpadding="0" cellspacing="0"
align="center">
<tr>
<td>
<div id="my_chart"></div></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center"> </td>
</tr>
</table>
<table id="resultTable" class="edit_table" cellpadding="4"
cellspacing="1">
<c:if test="${loginCountList!=null}">
<tr style="background: #eee;">
<th style="width: 10%">时间</th>
<th style="width: 10%">登录人数</th>
<th style="width: 10%">登录次数</th>
<th style="width: 10%">详情</th>
</tr>
<c:forEach items="${loginCountList}" varStatus="v" var="k">
<tr style="background: #fff;">
<td><c:out value="${k.LOG_DATE}" /></td>
<td><c:out value="${k.USER_CNT}" /></td>
<td><c:out value="${k.LOGIN_CNT}" /></td>
<td><a onclick="openLoginResultInfoWindow('${k.LOG_DATE}')"
style="cursor: pointer; color: blue;">查看</a></td>
</tr>
</c:forEach>
</c:if>
<tr>
<td colspan="4" align="right">
共<c:out value="${totalCount1}" />条 每页<c:out value="${numOfPage}" />条
共<c:out value="${pageCount}" />页 当前第<c:out value="${pageNum}" />页
<c:if test="${pageNum>1}">
<a onclick="firstPage();" style="cursor: pointer; color: blue;">首页</a>
</c:if>
<c:if test="${pageNum>1}">
<a onclick="lastPage();" style="cursor: pointer; color: blue;">上一页</a>
</c:if>
<c:if test="${pageNum<pageCount}">
<a onclick="nextPage();" style="cursor: pointer; color: blue;">下一页</a>
</c:if>
<c:if test="${pageNum<pageCount}">
<a onclick="endPage();" style="cursor: pointer; color: blue;">末页</a>
</c:if>
</td>
</tr>
</table>
逻辑写在action里面,有一个方法:
public String queryLoginLog() {
userName = "%" + userName + "%" ;
if (pageNum == 0) {
pageNum = 1;
}
int startRow = new Integer((pageNum - 1) * numOfPage + 1);
int endRow = new Integer(pageNum * numOfPage);
countList = loginLogService.queryLoginLogCount(userName, startDate, endDate);
totalCount = Integer.parseInt(countList.get(0).get("TOTALCOUNT").toString());
this.loginLogList = loginLogService.queryLoginLog(userName, startRow, endRow, startDate, endDate);
setPageCount((totalCount-1)/numOfPage+1);
return "success";
}