0,页面引用jquery及插件jquery-1.2.6.pack.js,jquery.dimensions.pack.js 详细效果见BRM系统--发展部跟进
1,为承载数据的div增加onscroll事件:
2,在AddMoreData()方法中判断滚动条是否到达底部,若是,则异步传输数据
function AddMoreData(){
var myDiv = $("#dvBody")[0];
// alert( $("#dvBody")[0]);
if ( myDiv.scrollTop + myDiv.style.pixelHeight > myDiv.scrollHeight ){
lastPostFunc(); //异步加载数据
}
}
var hasReturn = true; //指示当目前异步请求返回之后才可以进行下一次的异步传输,不然可能会出现数据不一致的情况
3, function lastPostFunc()
{
if ( ! hasReturn ) return;
hasReturn = false; //开始本次传输
//传输查询条件
var queryStr = document.location.search;
//因要获取上次滚动所达元素,以便在数据中取出此记录以下的数据,故须要在页面中用一hidden元素存起每次的最后的记录ID,并传给查询数据内
var url = "data.aspx" + queryStr + "&lastID=" + $("#LastID").val() + "&sn="+$(".sn:last").attr("id");
url = url + "&txtCustomerName=" + $("#txtCustomerName").val();
url = url + "&txtTel=" + $("#txtTel").val();
url = url + "&ddlCustomerTypeSelectedValue=" + $("#ddlCustomerType").val();
url = url + "&ddlCommunicateStatusSelectedValue=" + $("#ddlCommunicateStatus").val();
url = url + "&txtOrderDate_begin=" + $("#txtOrderDate_begin").val();
url = url + "&txtOrderDate_end=" + $("#txtOrderDate_end").val();
//alert(url);
$('div#lastPostsLoader').html('
'); //用id为lastPostsLoader的div加载等待图片
$.post(url,
function(data){
//alert($(".wrdLatest:last").attr("id"));
if (data != "") {
$(".wrdLatest1:last").after(data); //回调函数,将查询到的新数量加到:class为wrdLatest1的集合的最后一个元素之后,故在得到的数据中要生//成classclass为wrdLatest1的元素,以定位最后一个。
}
$('div#lastPostsLoader').empty();
hasReturn = true; //本次传输完毕,可以进行下一次异步传输
});
};