加载更多数据 infinite ajax scroll 分页

daydream000 2014-01-16

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>

相关推荐

mmywcoco / 0评论 2020-06-06