一段滚动到页面底部自动加载更多数据的js代码,需要jquery.js 、 jquey.tmpl.js 支持

var Data = {

PageCount: 1,

PageSize: 30,

IsCompleted: false,

init: function(rows) { //初始化,载入第一页数据

$(".list-item").detach();

Data.IsCompleted = false;

Data.load(1, rows);

},

setPage: function() { //数据载入成功,设置下一页索引

var $page = $("#PageIndex");

var index = parseInt($page.val()) + 1;

$page.val(index);

},

scroll: function(page, rows) { //滚动到底部加载数据

if (Data.IsCompleted) {

return false;

}

var top = $(window).scrollTop();

var win = $(window).height();

var doc = $(document).height();

if ((top + win) >= doc) {

Data.load(page, rows);

}

},

load: function(page, rows) { //载入数据方法

$("#PageIndex").val(page);

var chkSubject = $("#chkSubject").prop("checked");

var chkContent = $("#chkContent").prop("checked");

var logical = $('input:radio[name="rbtnLogical"]:checked').val();

var selectedTypeId = $("#hfdselectedId").val();

var $msg = $('.load-btn');

$msg.removeClass('load-more').text('正在载入数据...');

$.ajax({

url: "?pageindex=" + page +

"&pagesize=" + rows +

"&keywords=" + encodeURI($("#txtKeyWords").val()) +

"&chkSubject=" + chkSubject +

"&chkContent=" + chkContent +

"&logical=" + logical +

"&typeid=" + selectedTypeId +

"&t=" + (new Date().getTime()),

type: "POST",

success: function(json) {

Data.PageCount = json.PageCount;

var data = json.List;

if (data != null && data.length > 0) {

Data.append(data);

if (Data.PageCount == page) {

Data.IsCompleted = true;

$msg.removeClass('load-more').text('已加载全部数据!');

return true;

}

Data.setPage();

$msg.addClass('load-more').text('查看更多');

return true;

}

$msg.removeClass('load-more').text('已加载全部数据!');

return false;

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

$msg.removeClass('load-more').text('数据加载失败!点击重试。');

alert(errorThrown + ":" + textStatus);

}

});

return false;

},

append: function(json) { //构造html,并填充

var $container = $('.table');

$.each(json, function(i) {

var html = $("#list-item-template").tmpl(json[i]);

html.appendTo($container);

});

}

};

var $page = $("#PageIndex"); //页索引

//初始化

Data.init(Data.PageSize);

//滚动加载

$(window).scroll(function () {

Data.scroll($page.val(), Data.PageSize);

});

//手动加载

$(".load-more").bind("click", function () {

Data.load($page.val(), Data.PageSize);

});

//查询

$("#btnSearch").bind("click", function () {

Data.init(Data.PageSize);

});

html底部自动加载下一页,js页面滚动到底部时自动加载下一页数据相关推荐

  1. JS返回上一页-JS返回下一页-JS页面跳转

    JS返回上一页-JS返回下一页-JS页面跳转 Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back( ...

  2. 如何设置页脚跟随页面滚动 高度不够时固定在底部

    在开发PC页面的时候 我们经常遇到底部栏要自适应页面,页面内容少的时候要固定在底部,内容超出的时候要跟随页面滚动.这里介绍一个比较容易的方法只需设置页面内容最小高度min-height比如min-he ...

  3. oracle里子连接查询,pc端页面滚动到底部加载更多数据......

    场景:pc端页面鼠标滚动到底部时,通过ajax加载更多的数据,实现分页功能,封装成了一个函数,自己根据实际情况调用即可. 说明:discussList是放加载内容的div容器 // 加载更多评价的函数 ...

  4. vue实现上下滑动翻页_vue 实现滚动到底部翻页效果(pc端)

    pc端vue 滚动到底部翻页 效果,具体内容如下所示: html: [{{item.code||item.name}}] {{item.name}} js: 先写滚动事件 handleScroll() ...

  5. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  6. 页面滚动图片等元素动态加载实现本质

    各种网站经常看到页面滚动到可视区域,然后才加载相应的图片资源,他的本质是什么呢?本文来分析一下 很简单,就是判断当前元素是否是可视区域内 假设:h1 = 滚动条滚去的高度 w1 = 滚动条滚去的宽度 ...

  7. html+监听+页面滚动到底部,解决HTML5中滚动到底部的事件问题

    问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多. 解决方案:可以采用window的滚动事件进行处理 分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个 ...

  8. 杰奇php手机登陆自动跳转,杰奇cms通过js代码,实现微信访问自动登录

    之前有人吐槽了这个,网上流传的杰奇2.X版本很多都带微信接口,但是如果应用在微信公众号,却不能访问就立即登录,还得手动点击才可以,这就造成一丢丢的不方便,毕竟真的在公众号运营的时候,基本上没谁会喜欢这 ...

  9. jquery让页面滚动到底部

    function scrollToEnd(){//滚动到底部var h = $(document).height()-$(window).height();$(document).scrollTop( ...

最新文章

  1. CF803C Maximal GCD
  2. 解决Mask RCNN训练时GPU内存溢出问题
  3. 分布式消息队列Kafka集群安装
  4. python模拟登录qq账号密码_最新的Python模拟登陆QQ脚本,一键批量登录,强行过验证!...
  5. 「luogu3704」[SDOI2017]数字表格
  6. Apache Log4j2 RCE 命令执行漏洞预警及修复方案
  7. 用python来构建一个word文档-写文章
  8. VTK:简单操作之ProjectPointPlane
  9. 【iOS】Touch Up Inside 和 Touch Up Outside 的区别
  10. PHP学习笔记三(数组API)
  11. 【光纤传输特性】图文并茂,你该了解这些
  12. 北京大学计算机系张润楠,▶拜泉县第一中学2019年高考喜报
  13. 弹性伸缩Auto Scaling
  14. 面对ONF挑衅 思科用ACI回绝SDN挑战
  15. Python爬取网易云音乐热歌排行榜Top200音乐
  16. 004永磁同步电机的工作原理:大白话详细讲解从最简单的直流有刷电机到永磁同步电机是如何转动起来的
  17. Python学习之路:通过分片的方式修改列表的技巧(拓展知识)
  18. 有效扩展:来自预训练和微调变换器的见解、rct.ai训练出5亿参数的BERT-X模型
  19. lv_canvas 画布
  20. FastJson - JSONObject 如何设置成有序?(如:LinkedHashMap)

热门文章

  1. 经典C语言程序100例之三六
  2. python携程酒店评论_携程酒店评论爬虫心得
  3. 计算机办公应用高级教案,办公自动化高级应用电子教案.pdf
  4. Hive基本操作,DDL操作(创建表,修改表,显示命令),DML操作(Load Insert Select),Hive Join,Hive Shell参数(内置运算符、内置函数)等
  5. MapReduce 计数器简介(转载自:http://www.tuicool.com/articles/qqyIBr)
  6. java并发包消息队列
  7. Android学习笔记:对Android应用进行单元测试
  8. springMVC3.0(文件上传,@RequestMapping加参数,@SessionAttributes,@ModelAttribute,转发,重定向,数值获取,传参,ajax,拦截器)
  9. python监视键盘_关于键盘监视的库pyHook与pythoncom
  10. 深入浅出设计模式原则之开闭原则(OCP)