利用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
  }
});
var container = $('#container');
var finished = true;
var intShowCount = parseInt(document.getElementById("intShowCount").value);
var start = intShowCount;
$(window).scroll(function() {
    var totalCount = document.getElementById("totalCount").value;
    var pageNow = 1;
    var scrollHeight = $(document).height();
	var scrollPosition = $(window).height()+ $(window).scrollTop();
	if (finished&& ((scrollHeight - scrollPosition)/ scrollHeight === 0)) {
			finished = false;
			if (totalCount < intShowCount) {
				return;
			}
			if (start >= totalCount) {
				return;
			}
			if (pageNow * intShowCount - totalCount > intShowCount) {
				return;
			}
			var end = start + intShowCount;
			if (end > totalCount) {
				end = totalCount;
			}
			$.ajax({
				type : 'post',
				url : '${ajaxURL}',
				data : {
						<portlet:namespace/>start : start,
						<portlet:namespace/>end : end,
						<portlet:namespace/>intShowCount : intShowCount
					},
				dataType : "json",
				success : function(data) {
					var str = "";
					pageNow++;
					start = start + intShowCount;
					$.each(data,function(i, obj) {
                    //拼接的内容    
                    });
					$('#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());
	}

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值