jQuery 自动翻页与数据同步

3 篇文章 0 订阅
1 篇文章 0 订阅
  • 翻页原理
    通过计算这几个参数:
    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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值