想做成像微博那种样式的,以下是大致的代码。
第一步,滚动加载数据:
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');
})