滚动下拉简单实现分页

淡淡的烟草味﹌ 2022-03-25 14:52 448阅读 0赞

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>  
   
 <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>