加载更多数据 infinite ajax scroll 分页

1.页面代码:

//加载更多页面
        $(document).ready(function() {
      var pageNo=2;   //加载更多页的页码
      var result="";  //返回的页面
         $(window).scroll(function(){
          var scrollTop = $(this).scrollTop();
    var windowHeight = $(this).height();
          var scrollHeight = $(document).height();
          if(result.indexOf("id='theLast'")<0 && scrollTop + windowHeight == scrollHeight){
           $.ajax({
            url: "${util.path}/category/moreImage.do",
            data: {
             categoryId: "${categoryId}",
             pageNo: pageNo
            },
            success: function( data ) {
             result = data;
             if(result.indexOf("id='theLast'") <0){
                    $("#img_detail").append(data);
             }
             else{
        $("#loader").html(result);
       }
                pageNo++;
            }
           });
          }
         });
        });

2.更多数据的页面代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:forEach var="imageVo" items="${imageDtoList}">
 <dd>
  <h4>${imageVo.name}</h4>
  <img class="product_detail"
   src="${util.path }${util.repository }${imageVo.path }${imageVo.postfix }">
 </dd>
</c:forEach>
<c:if test="${imageDtoList==null || imageDtoList.size() <=0}">
 <p id='theLast' style="text-align: center;">已经是最后一页</p>
</c:if>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值