滚动 下拉简单实现分页

于 2019-01-21 15:36:48 发布
阅读量2.9k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujucai/article/details/86575407
版权

1. 需要分页的jsp页面 添加滚动下拉触发事件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../init.jsp"%>
<!DOCTYPE html>
<html>
    <head>    
    <%@include file="../head.jsp"%>
    <title>康复之家</title>    
    <link rel="stylesheet" href="<%=basePath %>weixin/css/me.css">
    <script type="text/javascript" src="<%=basePath%>res/js/layer/layer.min.js"></script>
    </head>
    <body id="arrderTitle">
         <div class="banner">
            <img src="<%=basePath%>weixin/img/kangf.png" alt="">
        </div>
      <%--   <div class="workSite clear" >
            <div class="clear" style="width:100%">
                <div class="picHome">
                    <img src="<%=basePath%>weixin/img/home.png" alt="">
                </div>
                <div class="workSiteP" style="width: 85%;" id="arrderTitle">
                    <c:if test="${COOPERATE!=null}">
                        <p id="arrder">地址：${COOPERATE.province}${COOPERATE.city}${COOPERATE.area}<span id="updateArea" class="fr" style="margin-left: 1rem; font-family: simsun;font-weight: 700;">></span></p>
                    </c:if>
                     <c:if test="${COOPERATE==null}">
                        <p id="arrder">地址：深圳市宝安区福永街道白石厦社区福永大道78号广福大厦707<span id="updateArea" class="fr" style="margin-left: 1rem; font-family: simsun;font-weight: 700;">></span></p>
                    </c:if>
                </div>
            </div>  
        </div> --%>
        <div class="workSite clear">
            <div class="picHome">
                <img src="<%=basePath%>weixin/img/home.png" alt="">
            </div>
            <div class="workSiteP">
                 <c:if test="${COOPERATE!=null}">
                        <p id="arrder">地址：${COOPERATE.province}${COOPERATE.city}${COOPERATE.area}</span></p>
                    </c:if>
                     <c:if test="${COOPERATE==null}">
                        <p id="arrder">地址：深圳市宝安区福永街道白石厦社区福永大道78号广福大厦707</span></p>
                    </c:if>
            </div>
            <span  class="fr">></span>
        </div>
        <div class="clear workTips">
            <div class="clear" style="width:100%">
                <div class="picHome">
                    <img src="<%=basePath%>weixin/img/peo.png" alt="">
                </div>
                <div class="workSiteP">
                    <p id="name">负责人：${COOPERATE.name==null?'王博伟':COOPERATE.name}&nbsp;&nbsp;手机号：${COOPERATE.phone==null?'13607671755':COOPERATE.phone}</p>
                    <p id="size">病友数量：${USERSIZE==null?'0':USERSIZE}</p>
                </div>
            </div>
        </div>
        
        <div id="myActivesList" style="margin-bottom: 1.7rem;">
            <p class="mcDiscussT" style="padding-left: 0.5rem;"><span>热门活动</span></p>
            <div class="bot10" >
             <ul class="medicineul">
                <c:forEach  items="${rows}" var="list">
                   <li>
                        <a href="<%=basePath%>weixin/cooperate/lydActivityCtl/recoryActiveDetail.cs?id=${list.id}">
                           <img src="${list.img}" alt="" class="medicineImg">
                            <div class="medicineTxt fl">
                                 <p class="yaoT">${list.title}</p>
                                 <p class="lightxt" style="font-size:0.3rem;margin-top:0.2rem;">
                                     <span><fmt:formatDate value="${list.modifyDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>  
                                     <span>${list.readcount}人浏览</span>
                                 </p>
                            </div>
                        </a>
                    </li>
                 </c:forEach>
               </ul>
           </div>
        </div>
        <input type="hidden" name="province" id="province" value=""/>
        <input type="hidden" name="city" id="city" value=""/>
        <input type="hidden" name="area" id="area" value=""/>
        <input type="hidden" name="provinceId" id="provinceId" value=""/>
        <input type="hidden" name="cityId" id="cityId" value=""/>
        <input type="hidden" name="areaId" id="areaId" value=""/>
         <!-- 弹窗选择城市 -->
        <div class="joinmask nodisplay">
            <div class="citycontent">
                <div class="btnBar">
                    <div class="fl cityCancel"> 取消</div>
                    <div class="fr bluetxt">确定</div>
                </div>
                <div class="wheels">
                    <div class="wheel wheel_province">
                        <ul >
                        </ul>
                    </div>
                    <div class="wheel wheel_city">
                        <ul class="selectContainer">
                        </ul>
                    </div>
                    <div class="wheel wheel_area">
                        <ul class="selectContainer">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        $(function(){
            var status="${USER.status}";
           <%--  if(status=="0"){
                window.location.href = '<%=basePath%>weixin/patient/lydUserCtl/myWork.cs';
            } --%>
            $(".meTabs a").each(function(){
                $(this).click(function(){
                    $(".meTabs a").removeClass("current");
                    $(this).addClass("current");
                })
            })
        })
    </script>
    <script type="text/javascript">
   scroll
            var page=1;
            var totalpage="${pageTotal}";
            var    pageSize="${pageSize}"
            var totalheight=0 ;
            var totalheight2=0 ;
            $(window).scroll(function(){
                   totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());  
                  if($(document).height() == totalheight){
                    page++;
                  if(page<=totalpage){
                          $.ajax({
                              type: 'get',
                              url: 'recoryHasfamilyList.cs?pageSize='+pageSize+'&page='+page,
                              dataType:"html",
                              data:"",
                              success: function(html){
                                  $('.medicineul').append(html);
                             }
                        });
                  }else{
                      page =  totalpage ;
                  }
                 }
            });
    </script>
 <!-- 地址js -->
 <script type="text/javascript">
    // 城市联动切换效果
    $("#updateArea").click(function(){
        $(".wheel_province ul").html('');
        $(".wheel_city ul").html('');
        $(".wheel_area ul").html('');
           $.get('<%=basePath%>area/getProvice.cs',function(data){
               var html = "";
               for(var i in data){
                   html += "<li id="+data[i].code+" οnclick='cityCode(\""+data[i].code+"\",\""+data[i].name+"\")'>";
                   html += data[i].name;
                   html += "</li>";    
               }
               $(".wheel_province ul").html(html);
           });
        $(".joinmask").show(200);
    })
     //获取联动市级
     function cityCode(code, name){
        $(".wheel_city ul").html('');
        $(".wheel_area ul").html('');
         $.get('<%=basePath%>area/getByParentCode.cs',{'param': code}, function(data){
               var html = "";
               for(var i in data){
                       html += "<li id="+data[i].code+" οnclick='areaCode(\""+data[i].code+"\",\""+data[i].name+"\")'>";
                       html += data[i].name;
                       html += "</li>";
               }
               $(".wheel_city .selectContainer").html(html);
        });
    }
    //获取联动市级
     function areaCode(code, name){
        $(".wheel_area ul").html('');
         $.get('<%=basePath%>area/getByParentCode.cs',{'param': code}, function(data){
               var html = "";
               for(var i in data){
                       html += "<li id="+data[i].code+" >";
                       html += data[i].name;
                       html += "</li>";
               }
               $(".wheel_area .selectContainer").html(html);
        });
    }
    //取消按钮
     $(".cityCancel").click(function(){
         $(".joinmask").hide(200);
     })
    //确定按钮  
     $(".bluetxt").click(function(){
        if($(".wheel_province .current").text()!="" && $(".wheel_city .current").text()!="" && $(".wheel_area .current").text()!=""){
            $("#arrder").html($(".wheel_province .current").text()+'&ensp;'+$(".wheel_city .current").text()+'&ensp;'+$(".wheel_area .current").text());
            //$("#arrderTitle").html($(".wheel_area .current").text()+'肿瘤康复之家<img id="updateArea" src="<%=basePath%>weixin/img/toggle.png" alt="" style="width: 0.35rem;margin-left: 0.3rem;">');
               $(".joinmask").hide(200);
            $("#province").val($(".wheel_province .current").text());
            $("#city").val($(".wheel_city .current").text());
            $("#area").val($(".wheel_area .current").text());
            $("#provinceId").val($(".wheel_province .current").attr("id"));
            $("#cityId").val($(".wheel_city .current").attr("id"));
            $("#areaId").val($(".wheel_area .current").attr("id"));
            
            var obj=new Object();
             obj.id="${USER.id}";
             obj.province=$("input[name='province']").val();
             obj.provinceId=$("input[name='provinceId']").val();
             obj.city=$("input[name='city']").val();
             obj.cityId=$("input[name='cityId']").val();
             obj.area=$("input[name='area']").val();
             obj.areaId=$("input[name='areaId']").val();

             $.post('<%=basePath%>weixin/cooperate/lydUserCtl/certificationAdd.cs', {"data" : JSON.stringify(obj)}, function(data) {
                     if (data.ret == 1) {
                        layer.msg("修改地区成功！", {
                            time: 1000
                        },function(){
                            window.location.href = '<%=basePath%>weixin/cooperate/lydUserCtl/recoryHasfamily.cs';
                        });
                     }else{
                         layer.msg(data.msg);
                     }
             }, "json");
        }else{
            $(".joinmask").hide(200);
        }
     })
     $(".wheel_province").on("click","ul li",function(){
            $(".wheel_province li").removeClass("current");
            $(this).addClass("current");
            $(".wheel").css("width","30%");
     })

     $(".wheel_city").on("click","ul li",function(){
          $(".wheel_city li").removeClass("current");
          $(this).addClass("current");
     })
     
     $(".wheel_area").on("click","ul li",function(){
          $(".wheel_area li").removeClass("current");
          $(this).addClass("current");
     })
    </script>
</html>

2.controller层
 

    @RequestMapping("recoryHasfamilyList")
    public String recoryHasfamilyList(String page, String pageSize, HttpServletRequest request, ModelMap mm) {

                Pager pager = new Pager();
                    pager = this.lydActivityDao.queryLydActivitys(new Pager(Integer.valueOf(page == null ? "1" : page),
                            Integer.valueOf(pageSize == null ? "10" : pageSize)), null);
                
                mm.put("rows", pager.getResults());
                mm.put("total", pager.getTotal());
                mm.put("pageTotal", pager.getPageTotal());
                mm.put("pageSize", pager.getPageSize());

                mm.put("USER", user);
            }
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "weixin/cooperate/recory-hasfamilylist";
    }

 

3.ajax返回一个页面 拼接到第一个jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@include file="../head.jsp"%>
 			 	<c:forEach  items="${rows}" var="list">
	               <li> 
	              		<img src="${list.img}" alt="">
	                    <a href="<%=basePath%>weixin/cooperate/lydActivityCtl/recoryActiveDetail.cs?id=${list.id}"> 
	                        <div class="fl payTxt">
			                     <p class="yaoT">${list.title}</p> 
			                     <p class="yaoB lightxt">
			                         <span><fmt:formatDate value="${list.modifyDate}" pattern="yyyy-MM-dd HH:mm:ss"/></span>  
			                         <span>${list.readcount}人浏览</span>
			                     </p>
			                </div>
	                    </a>
	                </li>
	             </c:forEach>

 

 

河上街
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值