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实现的表格前端排序功能示例
Sep 18 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery treeview树形结构应用
Mar 24 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
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
python解决字典中的值是列表问题的方法
2013/03/04 Python
pyqt和pyside开发图形化界面
2014/01/22 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
python实现用户登录系统
2016/05/21 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
详解Python是如何实现issubclass的
2019/07/24 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
创先争优标语
2014/06/27 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL