加载更多数据 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>
相关推荐
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo