`
qingwei201314
  • 浏览: 168242 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

加载更多数据 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>

分享到:
评论

相关推荐

    Infinite-Scroll无限滚动加载数据

    这种技术允许用户在滚动页面时自动加载更多内容,而不是一次性加载所有数据,从而改善用户体验,减少页面加载时间,尤其对大数据量的列表或网格尤为重要。 在实现无限滚动时,主要涉及以下几个关键知识点: 1. **...

    infinitescroll.zip

    除了基本配置,jQuery.infinitescroll插件还支持许多可选参数和方法,如禁用或启用无限滚动,或者手动触发加载更多内容。此外,与其它jQuery插件一样,它可以与其他jQuery库和插件(如 Masonry 或 Isotope 用于网格...

    infinite—scroll-demo.zip

    6. **更新状态**:如果还有更多数据可加载,更新加载按钮或提示,否则隐藏或移除加载提示。 在压缩包中的`pull`文件可能是一个JavaScript文件,实现了上述的无限滚动逻辑,或者是一个描述如何实现无限滚动的文档。...

    masonry+infinitescroll.zip

    Infinite Scroll通常与Ajax技术结合使用,以异步方式加载新数据,减少了页面整体的加载时间,提高了用户满意度。它可以用于加载新闻、博客文章、商品列表等,尤其适合数据量大的场景。 **Masonry与Infinite Scroll...

    前端项目-jquery-infinitescroll.zip

    3. 调用jQuery的`.infinitescroll()`方法,配置相关参数,如数据源、加载更多内容的触发点等。 4. 实现加载更多内容的回调函数,通常涉及Ajax请求,从服务器获取新的数据。 通过自定义设置,开发者可以控制滚动阈值...

    手机下拉加载更多数据

    在移动设备上,用户浏览网页时,为了提供更好的用户体验,通常会采用“下拉加载更多”(Infinite Scroll 或 Pull-to-Refresh)的功能。这种设计允许用户在滚动到底部时,通过简单的手势加载更多的内容,而无需点击...

    angular-InfiniteScroll:简单的AngularJS无限滚动

    // 发送AJAX请求获取更多数据 $http.get('/api/data?page=' + $scope.currentPage).then(function(response) { // 处理并添加新数据到列表 $scope.data.push(...response.data); // 更新当前页码 $scope....

    无限ajax滚动:轻松地将现有分页变成无限滚动页面

    SEO友好 :1st_place_medal: 不会破坏浏览器的后退按钮 :hundred_points: 高度可定制 :sparkles: 有关更多功能,文档和示例的信息,访问: :安装通过CDN使用Infinite Ajax Scroll 通过直接链接到上的Infinite Ajax ...

    网页底部加载更多内容的控件

    网页底部的“加载更多”控件是现代网页设计中常见的一种功能,主要用于处理大量内容的分页显示。这种设计能够优化用户体验,避免用户频繁滚动页面或点击多级分页按钮来查看更多的信息。在本话题中,我们将深入探讨...

    jquery实现数据分页显示

    在网页开发中,数据分页是一项非常常见的功能,它能够帮助用户更有效地浏览大量信息,而不会一次性加载过多内容导致页面加载慢或者浏览器卡顿。本教程将专注于使用JavaScript库jQuery来实现数据分页显示,涵盖了内存...

    load_More(点击加载更多)

    3. **API接口**:后端需要提供一个能接收请求并返回更多数据的API接口。接口可能需要包含参数,如当前加载的数据条数或上一次请求的最后一条数据的ID,以便于服务器知道从哪里继续返回数据。 4. **数据绑定和渲染**...

    下拉刷新 上拉加载更多

    比如jQuery的`$.ajax`和`$(window).scroll()`方法,Vue.js的`v-infinite-scroll`指令,以及React的`react-infinite-scroller`等组件库,可以帮助开发者快速实现下拉刷新和上拉加载更多功能。 总结: "下拉刷新"和...

    jquery分页大全

    滚动分页,又称无限滚动或自动加载,是在用户滚动到页面底部时自动加载更多内容。这种效果常见于社交媒体和新闻网站。jQuery Infinite Scroll和jQuery Lazy Load插件可以帮助实现这一功能,它们监听滚动事件,当用户...

    html滚动,一个移动端的上拉、下拉加载更多的组件

    在JavaScript中,我们可以使用`addEventListener`方法添加事件监听器,当滚动到底部时触发加载更多数据的函数。这个函数通常会发送Ajax请求,从服务器获取新的数据,然后动态地将新内容插入到列表中。例如: ```...

    infinite-scroll-project:react和node.js无限滚动项目

    在无限滚动场景中,React可以通过监听滚动事件,判断是否到达页面底部,然后触发加载更多数据的请求。 Node.js则是一个基于Chrome V8引擎的JavaScript运行环境,常用于构建服务端应用程序。在这个项目中,Node.js...

    ajax上拉懒加载列表(适用于移动端)

    "ajax上拉懒加载列表(适用于移动端)"这个项目Dome正是为了解决这个问题,通过Ajax实现数据的分页加载,使得大量数据的显示更加高效、流畅。 一、Ajax基础 Ajax,全称Asynchronous JavaScript and XML,是一种在不...

    hide:一个JavaScript文件,可轻松隐藏和显示Infinite Scroll设置中的内容

    在Infinite Scroll(无限滚动)这种设计模式中,JavaScript扮演着至关重要的角色,它允许用户在滚动页面时加载更多内容,而不是点击分页链接。这种技术在社交媒体、博客和电子商务网站上非常常见,因为它提供了流畅...

    上拉 加载 刷新 页面

    2. 加载更多数据:`loadMoreData()`函数通常会通过Ajax向服务器发送请求,获取更多内容并动态添加到页面中。使用jQuery的`$.ajax`或`$.getJSON`方法可以方便地实现这一过程。 二、刷新页面(Page Refresh) 页面...

    实现分页查询(上)

    4. 跳跃分页(如Google的“infinite scroll”):当用户滚动到页面底部时,动态加载下一页数据,提供无缝浏览体验,但可能会造成服务器负载增加。 四、优化分页查询 1. 使用索引:为查询条件涉及的字段创建索引,...

    瀑布流兼容移动端ZeptojQuery插件下拉刷新、上拉加载更多

    在移动端,为了提供更好的用户体验,通常会结合下拉刷新和上拉加载更多的功能,以实现实时更新内容和分页加载。 Zepto.js 是一个轻量级的JavaScript库,设计目标是成为jQuery的移动版,它针对现代浏览器进行了优化...

Global site tag (gtag.js) - Google Analytics