使用jquery实现网页滚动加载数据且增加来新数据提醒功能

想做成像微博那种样式的,以下是大致的代码。

第一步,滚动加载数据:

        var range = 50; //距下边界长度/单位px
	var elemt = 500; //插入元素高度/单位px
	var maxnum = 5; //设置加载最多次数
	var num = 2;
	var totalheight = 0;
	var main = $("#content"); //主体元素
	var loadMore = true;
	$(window).scroll(
		function() {
			var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
			totalheight = parseFloat($(window).height())+ parseFloat(srollPos);
			if (($(document).height() - range) <= totalheight&& num <= maxnum) {
				$('#loadMore').remove();
				$.ajax({
					type : "get",
					url : "/请求URL",
					data : "num=" + num,
					async : false,
					success : function(data) {
							$('#tbody').append(data);
							if (num == maxnum&& loadMore == true) {
								$("#tbody").append('<div class="loadingMore" id="loadMore"><a>加载更多</a></div>');
								loadMore = false;
							}
					}
			});
			num++;
		}
	});

	$("#loadMore").live("click", function() {
		maxnum = maxnum + 5;
		loadMore = true;
	});

第二步,定时加载新数据:

/**局部刷新*/var main = $('#tbody'); //主体元素
	function loadNew(url) {
		var maxTime = $("#tbody").find("tr:first").find("td:eq(3)").html();
		$.ajax({
			url : url,
			data : "maxTime=" + maxTime,
			async : false,
			dataType : "html",
			cache : false,
			success : function(data) {
				var nTr = data.split("<tr").length - 1;//回调函数返回的数据行数
				if (nTr > 0) {
					$(".loadingNew").show();
					$("#loadNew").html("有" + nTr + "条新数据");
					//$("#realTimeSum").html(parseInt($("#realTimeSum").text()) + nTr);总数
					$("#loadNew").live("click",//这里是点击“有xxx条新数据”时加载数据
					                   function() {
								$(".dot").remove();
								$('.loadingNew').remove();
								main.prepend(data);
								setLeftHeight();
								main.prepend("<div class='loadingNew' style='display: none'><a id='loadNew'>有0条新数据</a></div>");
								if (main.find("tr").length > 0) {
									main.find("tr:gt(9)").remove();//每页显示10行记录,新数据来,旧数据移除
									}
								});
						}
					}
				});
		setTimeout("loadNew('/请求url')", 120000);//2分钟刷新一次,顶部更新消息
	}
页面加载时:

$(function() {
		$("#tbody").prepend("<div class='loadingNew' style='display: none'><a id='loadNew'>有0条新数据</a></div>");//添加隐藏的div
		loadNew('/请求url');
	})



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值