app端分页简单的分页 java

大家好：

今天遇到一个问题自己整了一下午，好不容易整理出来，跟大家一起分享一下！样式如下：

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+"&currentPage="+$("#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>

Controller 方法：

@RequestMapping(value = "/transactionRecords", method = RequestMethod.POST)@ResponseBodypublic 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 分页方法

@Overridepublic 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;
}

app端分页简单的分页 java相关推荐

html ajax分页,简单ajax 分页
简单分页: 效果图: 思路: 数据渲染=>数据遍历(每页显示已规定好的条数).bindList()和执行分页渲染.initPaginator() 点击分页和下一页的时候,重新请求数据渲染,对应的 ...
JQuery Datatables 服务端分页简单应用学习
背景介绍最近在一个简单小项目中碰到需要一个前端数据表格控件,在看了网上的资料后最终选择了JQuery Datatables.Datatables功能及其强大,基本满足我的所有需求,在加上其插件Edi ...
java分页代码思路,记录--java 分页思路 (hibernate关键代码)
有时会脑袋蒙圈,记录下分页的思路下面代码是hibernate的分页,其分页就是从第几条数据为起点,取几条数据.比如在mysql中的limit(5,10)取的就是第6条到第10条在下面代码中的pag ...
jquery前端简单分页_如何使用jQuery创建简单的分页
jquery前端简单分页 How to create easy pagination with jQuery jQuery pagination. All we know, that when we ...
【Web】分页简单实现
web分页为什么需要分页? 一.数据方面的原因大量查询的数据耗时比较严重. 二.增强用户使用体验需求用户更方便的查询和展示他所需要的数据. 常见分页方式:传统分页方式和下拉式分页方式. 采用 ...
《5K入门级项目实战：好来屋在线影院》之第 11 战 —— 用户端首页、BootStrap 分页（中）
OK,这一节我们开发 API 接口,把需要的数据返回给客户端. 我们先来解决: 1.indexMovie.html 里的热门电影接口数据 2.index.html 文件里的相关接口,如截图: 实际的流 ...
java http服务端例子_简单的用 Java Socket 编写的 HTTP 服务器应用
/*** SimpleHttpServer.java*/importjava.io.*;importjava.net.*;importjava.util.StringTokenizer;/*** 一个 ...
java 强制下线_【java】如何强制app端强制下线？
例如 web 端删除了正在app 端登陆的用户,怎样能让app 端用户强制下线,web 端用什么方式可以达到这个效果?javaweb 回答这个是需要App和后台一起处理的,首先在app端写好to ...
php简单分页,php简单实现分页查询的方法
这篇文章主要为大家详细介绍了php简单实现分页查询的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下关于php,最近学了好多,老师跟我们说,现在学的都是php的核心部分,所以我比较注意了一下, ...

app端分页简单的分页 java

app端分页简单的分页 java相关推荐

最新文章

热门文章

app端分页 简单的分页 java

app端分页 简单的分页 java相关推荐

最新文章

热门文章

app端分页简单的分页 java

app端分页简单的分页 java相关推荐