jQuery 自动翻页与数据同步

翻页原理

通过计算这几个参数：

scrollTop()>=jQuery(document).height()-jQuery(window).height() 就可以知道已经滚动到底端了

jQuery(document).height() //是获取整个页面的高度

jQuery(window).height() //是获取浏览器页面的高度

使用方法：

1：第一次加载, 初始化totalrows;

2：每次加载数据时, 判断totalrows, 若totoalrows发生变化，页面提示有新数据，或直接同步数据;

3 : 每次打印数据后更新currows 统计当前页的总行数, 重置loading=false;

4 : if currows == totalrows 显示已加载完所有数据;

祭出代码：

//totalrows:数据总行数（包括未加载数据），currows：已经加载的数据行数，page：当前页
var totalrows=0 ,currows=0,page=0;
var winH = jQuery(window).height(); //页面可视区域高度
var loading = false; //解决滚动与加载冲突
///**********翻页方法
jQuery(function(){
jQuery(window).scroll(function() {
//当内容滚动到底部时加载新的内容
var pageH = jQuery(document.body).height();
var scrollT = jQuery(window).scrollTop(); //滚动条top
var aa = (pageH - winH - scrollT) / winH;
if (aa<0.02) {  //据说是参数未深究
//当前要加载的页码
if(!loading && totalrows > currows){
loading = true;
page = page+1;
f_loadinfo(page);
}
}
});
});
///**********加载数据
function f_loadinfo(page){
//此处省去获取数据方法N行
if(totalrows != Number(data.totalrows)){
//提示有新数据，或直接加载新数据
}
totalrows = Number(data.totalrows);
f_printlist(data);
}
///**********打印数据到页面
function f_printlist(data){
//此处省去打印方法N行
loading = false;
currows += Number(data.length);
if(currows == totalrows){
//没有更多数据了
}
}

缺陷：

toalrows == currows 后，再也不会去判断是否有新数据

一孔之见，欢迎指教

参考： http://blog.csdn.net/smartsmile2012/article/details/39343361