利用ajax+滚动条判断进行无限分页

1、设置一个容器

<div class="ptlt-app-lst" id="container">
        //TODO
        //要展示的内容
</div>

2、js部分

其中注意设置一个参数，使得一次只能进一次ajax

其中分页的参数，传入该表的总记录数、start、end。

其中是判断滚动条到底部的条件

$(window).on("scroll", function() {
  var scrollHeight = $(document).height();
  var scrollPosition = $(window).height() + $(window).scrollTop();
  if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
    // when scroll to bottom of the page
  }
});

$(document).ready(function() {
	var finished = true;
	var container = $('#container'); // 获取容器
	var totalCount = document.getElementById("totalCount").value;
	var structureKey = document.getElementById("structureKey").value;
	var favorite = document.getElementById("favorite").value;
	var category = document.getElementById("category").value;
	var order = document.getElementById("order").value;
	var sort = document.getElementById("sort").value;
	var keyWord = document.getElementById("keyWord").value;
	var pageNow = 1;
	var start = 24;
	$(window).scroll(function() {
        var scrollHeight = $(document).height();
		var scrollPosition = $(window).height()+ $(window).scrollTop();
		if (finished&& ((scrollHeight - scrollPosition)/ scrollHeight === 0)) {
				finished = false;
				if (totalCount < 24) {
						return;
				}
				if (pageNow * 24 - totalCount > 24) {
					return;
				}
				var end = start + 24;
				if (end > totalCount) {
					end = totalCount
				}

				$.ajax({
						type : 'post',
						url : '${ajaxURL}',
						data : {
								<portlet:namespace/>start : start,
								<portlet:namespace/>end : end,
								<portlet:namespace/>structureKey : structureKey,
								<portlet:namespace/>favorite : favorite,
								<portlet:namespace/>category : category,
								<portlet:namespace/>order : order,
								<portlet:namespace/>sort : sort,
								<portlet:namespace/>keyWord : keyWord
								},
						dataType : "json",
						success : function(data) {
								var str = "";
								pageNow++; // 分页值+1
								start = start + 24;
								$.each(data,function(i,obj) {
										var unReadCount = "";
								if (obj.unReadCount >= 1) {
									unReadCount = "<div class='ap-card-new'>"
												+ "<i class='fas fa-bell'></i>"
												+ "</div>"
								}
						}
						str += "<article class='ap-card app-agreement'>"
								+ "<div class='ap-card-hdr'>"
								+ "<a href='#' class='ap-card-lnk'> <span class='ap-card-tag'>"
						//TODO
                        //拼接展示内容
                        });
						$('#container').append(str);
						finished = true;
					}
				});
			}
		});
	});

3、后台代码部分

if (null != resourceRequest.getParameter("start")) {
	    String start = resourceRequest.getParameter("start");
	    String end = resourceRequest.getParameter("end");
	    String structureKey = resourceRequest.getParameter("structureKey");
	    String favorite = resourceRequest.getParameter("favorite");
	    String category = resourceRequest.getParameter("category");
	    String order = resourceRequest.getParameter("order");
	    String sort = resourceRequest.getParameter("sort");
	    String keyWord = resourceRequest.getParameter("keyWord");
	    int sta = Integer.parseInt(start);
	    int en = Integer.parseInt(end);
	    PrintWriter out = resourceResponse.getWriter();
	    ThemeDisplay themeDisplay = (ThemeDisplay) resourceRequest.getAttribute(WebKeys.THEME_DISPLAY);
	    long userId = themeDisplay.getUser().getUserId();
	    List<AppCardEntity> appCardEntityList = UsersFavoriteSettingsLocalServiceUtil
		    .searchUsersFavoriteSettingsAndCount(themeDisplay, favorite, sta, en, false, category, order, sort,
			    keyWord);
	    JSONArray array = JSONFactoryUtil.createJSONArray();
	    for (AppCardEntity appCardEntity : appCardEntityList) {
		JSONObject appCardObject = JSONFactoryUtil.createJSONObject();
		long unReadCount = UsersFavoriteSettingsLocalServiceUtil.getUnReadCount(userId,
			Long.parseLong(structureKey), Long.parseLong(appCardEntity.getGroupId()));
		appCardObject.put("categoryName", appCardEntity.getCategoryName());
		appCardObject.put("friendlyURL", appCardEntity.getFriendlyURL());
		appCardObject.put("name", appCardEntity.getName());
		appCardObject.put("groupId", appCardEntity.getGroupId());
		appCardObject.put("favoriteFlg", appCardEntity.getFavoriteFlg());
		appCardObject.put("unReadCount", unReadCount);
		array.put(appCardObject);
	    }
	    out.write(array.toString());
	}