大家好：
今天遇到一个问题自己整了一下午，好不容易整理出来，跟大家一起分享一下！样式如下：
JSP页面 其中
<span style="font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/view/common/tags.jsp" %>
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/base.css" type="text/css"/>
<title>交易记录</title>
</head>
<body>
<input type="hidden" id="currentPage" name="currentPage" value="0" />
<div class="container">
<ul class="record_tab">
<li class="current" οnclick="clickMother(30)">近一个月</li>
<li οnclick="clickMother(90)">近三个月</li>
<li οnclick="clickMother(0)">全部</li>
</ul>
<div class="panes">
</div>
</div>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.record_tab li').click(function(){
$(this).addClass('current').siblings().removeClass('current');
$('.panes>div:eq('+$(this).index()+')').show().siblings().hide();
})
});
//页面加载事件
window.οnlοad=function() //用window的onload事件，窗体加载完毕的时候
{
var startDate = dates(30); //开始时间 //调dates方法，
var nowDate = new Date(); //当前时间
nowDate.setDate(nowDate.getDate());
var endDate = nowDate.getFullYear() + '-' + (nowDate.getMonth()+1) + '-' + nowDate.getDate() + ' ' + nowDate.getHours() + ':' + nowDate.getMinutes() + ':' + nowDate.getSeconds();
var cardno ="<%=request.getParameter("cardNo")%>"; //卡号
var _path = "<%=request.getContextPath()%>";
viewPage(cardno,startDate,endDate,_path);
}
//分页显示
var finished = true;
function viewPage(cardno,startDate,endDate,_path) {
transaction(cardno,startDate,endDate,_path);
$(window).scroll(function(){
if($(document).scrollTop()>=$(document).height()-$(window).height() && finished){
finished = false;
var currentPage = $("#currentPage").val();
$("#currentPage").val(parseInt(currentPage)+1);
$.ajax({
type:"POST",
url:_path + "/mobile/cardManager/transactionRecords?cardno="+cardno+"&startDate="+startDate+"&endDate="+endDate+"¤tPage="+$("#currentPage").val(),
dataType:'json',
cache : false,
beforeSend:function(){
},
success:function(data){
finished = true;
if(data=='' || data==null){
$("#currentPage").val(parseInt(currentPage)-1);
finished = false;
}
if(data.length!=0){ //存在数据时，拼接数据
for(var i=0;i<data.length;i++){ //循环数据，配节页面
$(".panes").append( "<div class='pane' style='display:block;'>"+
"<div class='three_months'> "+
"<div class='three_months_fl fl'>"+
"<p class='expense_type'>"+data[i].tradeType+"</p>"+
"<p class='hospital_name'>"+data[i].tradePlace+"</p>"+
"<p class='payment_date'>"+data[i].tradeTime+"</p>"+
"</div>"+
"<div class='three_months_fr fr'> "+
"<p class='price price_red'>"+data[i].amount+"元</p>"+
"</div>"+
"</div>"+
"</div>");
}
}else{ //无任何数据
// $(".panes").append( "<div class='pane' style='display:block;'>"+
// "<p>无任何数据</p>"+
// "</div>");
}
if(data.length<5){
finished = false;
}
}
})
}
});
}
//月份点击
function clickMother(day){
var startDate1 ;
var endDate1;
var cardno1;
var _path1;
if(day!=0){
startDate1 = dates(day); //开始时间 //调dates方法，
var nowDate1 = new Date(); //当前时间
nowDate1.setDate(nowDate1.getDate());
endDate1 = nowDate1.getFullYear() + '-' + (nowDate1.getMonth()+1) + '-' + nowDate1.getDate() + ' ' + nowDate1.getHours() + ':' + nowDate1.getMinutes() + ':' + nowDate1.getSeconds();
cardno1 ="<%=request.getParameter("cardNo")%>"; //卡号
_path1 = "<%=request.getContextPath()%>";
finished = true;
viewPage(cardno1,startDate1,endDate1,_path1);
}else{
startDate1 = '1970-1-1 00:00:00 '; //开始时间
var nowDate1 = new Date(); //当前时间
nowDate1.setDate(nowDate1.getDate());
endDate1 = nowDate1.getFullYear() + '-' + (nowDate1.getMonth()+1) + '-' + nowDate1.getDate() + ' ' + nowDate1.getHours() + ':' + nowDate1.getMinutes() + ':' + nowDate1.getSeconds();
cardno1 ="<%=request.getParameter("cardNo")%>"; //卡号
_path1 = "<%=request.getContextPath()%>";
finished = true;
viewPage(cardno1,startDate1,endDate1,_path1);
}
}
//发送请求，拼接页面
function transaction(cardno,startDate,endDate,_path){
$("#currentPage").hide();//没办法 Different phone are not the same
var currentPage = $("#currentPage").val(); //当前页
$("#currentPage").val(1);
if(currentPage==""||currentPage==0){
$("#currentPage").val("1");
}
currentPage = $("#currentPage").val();
$(".panes").empty(); //清空之前的数据
$.post( _path + "/mobile/cardManager/transactionRecords",
{
"cardno" : cardno,
"startDate" : startDate,
"endDate" : endDate,
"currentPage" : currentPage,
},function(data) {
if(data.length!=0){ //存在数据时，拼接数据
for(var i=0;i<data.length;i++){ //循环数据，配节页面
$(".panes").append( "<div class='pane' style='display:block;'>"+
"<div class='three_months'> "+
"<div class='three_months_fl fl'>"+
"<p class='expense_type'>"+data[i].tradeType+"</p>"+
"<p class='hospital_name'>"+data[i].tradePlace+"</p>"+
"<p class='payment_date'>"+data[i].tradeTime+"</p>"+
"</div>"+
"<div class='three_months_fr fr'> "+
"<p class='price price_red'>"+data[i].amount+"元</p>"+
"</div>"+
"</div>"+
"</div>");
}
}else{
//无任何数据
$(".panes").append( "<div class='pane' style='display:block;'>"+
"<p>无任何数据</p>"+
"</div>");
}
});
}
//近一个月的时间（包含当天 共 30天）
function dates(tian) {
var newDate = new Date();
newDate.setDate(newDate.getDate() - (tian-1));
var date = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate() + ' ' + newDate.getHours() + ':' + newDate.getMinutes() + ':' + newDate.getSeconds();
return date;
}
//近一个月的时间（不包含当天 共30天）
/* function dates(tian) {
var newDate = new Date();
newDate.setDate(newDate.getDate() - tian);
var date = newDate.getFullYear() + '-' + (newDate.getMonth() + 1) + '-' + newDate.getDate() + ' ' + newDate.getHours() + ':' + newDate.getMinutes() + ':' + newDate.getSeconds();
return date;
} */
</script>
</body>
</html>
</span>
@RequestMapping(value = "/transactionRecords", method = RequestMethod.POST)
@ResponseBody
public Object transactionRecords(
@RequestParam(value = "cardno", required = true) String cardno //京医通卡号
,@RequestParam(value = "startDate", required = true) String startDate //开始时间
,@RequestParam(value = "endDate", required = true) String endDate //结束时间
,@RequestParam(value = "currentPage", required = false) String currentPage //当前页数的起始条数
){
CardInfo cardInfo = new CardInfo();
String inputType = "5"; //操作类型 5.交易记录查询
cardInfo.setCardno(cardno); //卡号
List<TradeRecords> tradeRecordsList = null;
try {
//分页参数
Integer pageSize =5;
Integer curPage =(Integer.parseInt(currentPage)-1)*pageSize;
Map<String, Object> pageInfo = new HashMap<String,Object>();
pageInfo.put("curPage", curPage); //当前页数的起始条数
pageInfo.put("pageSize", pageSize); //每页多少条
tradeRecordsList = cardManageInf.queryTradeRecords(cardInfo, inputType, startDate, endDate, pageInfo); //根据京医通卡号，查询交易记录
} catch (Exception e) {
e.printStackTrace();
logger.error("接口调用异常！");
}
return tradeRecordsList;
}
Service 分页方法
@Override
public List<TradeRecords> queryTradeRecords(CardInfo cardInfo,String inputType,String startDate, String endDate,Map<String, Object> pageInfo) throws Exception {
List<TradeRecords> tradeRecordsList = new ArrayList<TradeRecords>(); //所有数据
List<TradeRecords> tradeRecordsList1 = new ArrayList<TradeRecords>(); //当前页数据
for (int i = 0; i < 8; i++) {
TradeRecords tradeRecords = new TradeRecords();
tradeRecords.setTradeNo("abc000001"+String.valueOf(i));
tradeRecords.setTradeType("交易类型"+String.valueOf(i));
tradeRecords.setTradeTime("2015-01-03");
tradeRecords.setTradePlace("协和医院");
tradeRecords.setClientType("正常缴费");
tradeRecords.setAmount(100d);
tradeRecordsList.add(tradeRecords);
}
int curPage = (int) pageInfo.get("curPage"); //当前条数从哪里开始取
int offset = tradeRecordsList.size()-curPage;//还有多少没有取过
int pageSize = (int) pageInfo.get("pageSize"); //每页显示的记录数
int pageCount = offset>pageSize?pageSize : offset;//如果没有取过的大于需要显示的数，则实现显示数pageCount=pageItems,反之然；即剩余数大于显示条数，则显示五条，否则显示剩余条数
for(int i=curPage;i<tradeRecordsList.size();i++){
tradeRecordsList1.add(tradeRecordsList.get(i));
if(tradeRecordsList1.size() == pageCount){
break;
}
}
return tradeRecordsList1;
}
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
