jQuery滑动到底部加载下一页数据的实例代码


Posted in jQuery onMay 22, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script>page_num =page_num+1 ; //页码自动增加,保证下次调用时为新的一页。
      $.ajax({
        type: "get",  
        url: rent_url, 
        data: '2',
        dataType: "json",
        success: function (data) {
//          查询到的数据总数
          rentDataNum = data.count
//         每页加载6个 需要加载的页数 
          rentDataPagge = Math.ceil(rentDataNum/6);
          $(".loaddiv").hide();
//         返回信息的长度 大于0 则调用函数 把加载的数据通过html的形式 追加到视图中 
          if (data.houses.length > 0) {
            insertDiv(data.houses,rentDataPagge,pagenumber);
          }
        },
        beforeSend: function () {
          $(".loaddiv").show();
        },
        error: function (data) {
          $(".loaddiv").hide();
        }
      });
    }
    //初始化加载第一页数据
      getData(1);
    //生成数据html,append到div中
    function insertDiv(data,page_num,pagenumber) {
      var $mainDiv = $(".er_list");
      var result = '';
      if (pagenumber<=page_num){
        for (var i = 0; i < data.length; i++) {
          var houe_title   =  data[i].community_name != undefined ? data[i].community_name:data[i].business_area_name;
          result +='<li>';
          result +='<a href="#" rel="external nofollow" >'
          result +='<div class="img_left"><img src='+"http://image.5i5j.com/picture/slpic/l"+data[i].img_url+'></div>'
          result +='<div class="img_con">'
          result +='<h5>'+houe_title+'</h5>'
          result +='<p class="ting">'+data[i].bedroom+' 室'+ data[i].livingroom+' 厅1卫<span>·</span>'+data[i].buildarea+' ?<span>·</span>东南</p>'
          result +='<p class="info">'+data[i].district_name+'</p>'
          result +='<p class="tag">'
          result +='<em class="yell_01">不限购</em><em class="yell_02">近地铁</em><em class="yell_03">满两年</em><em class="yell_04">满两年</em>'
          result +='</p>'
          result +='<div class="jia"><p>'+data[i].price+' </p><span>123 /?</span></div>'
          result +='</div>'
          result +='</a>'
          result +='</li>';
        }
        $mainDiv.append(result);
        // 如果加载完数据则 删除等待加载时的图片
        if (pagenumber==page_num){
          $("div").remove('#loadings')
        }
      }
    }
    //==============核心代码=============
    var winH = $(window).height(); //页面可视区域高度
    var scrollHandler = function () {
      var pageH = $(document.body).height();
      var scrollT = $(window).scrollTop(); //滚动条top
      var aa = (pageH - winH - scrollT) / winH;
      if (aa < 0.02) {//0.02是个参数
        // 避免加载万书记 不停调用函数 进行的加载
        if (page_num<=rentDataPagge+1){
          // 滑动到地部 调用函数 加载数据
          getData(page_num);
        }
      }
    }
    //定义鼠标滚动事件
    $(window).scroll(scrollHandler);
    //==============核心代码=============
    //继续加载按钮事件
    $("#btn_Page").click(function () {
      getData(page_num);
      $(window).scroll(scrollHandler);
    });
  });
  </script>
jQuery 相关文章推荐
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery表单验证之密码确认
May 22 #jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
关于jQuery库冲突的完美解决办法
May 20 #jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 #jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 #jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 #jQuery
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
YII中assets的使用示例
2014/07/31 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
对Python中9种生成新对象的方法总结
2018/05/23 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
python调用百度语音识别api
2018/08/30 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
tensorflow常用函数API介绍
2020/04/19 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
环保公益广告语
2014/03/13 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
2014年保育员工作总结
2014/12/02 职场文书
教师个人年终总结
2015/02/11 职场文书
婚宴来宾致辞
2015/07/28 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
2016中秋节广告语
2016/01/28 职场文书