页面滚动动态加载数据

//返回顶部js

$(window).scroll(function() {
            var sc = $(window).scrollTop();
            //var rwidth=$(window).width()
            if (sc > 0) {
                $("#goTopBtn").css("display", "block");
                $("#goTopBtn").css("right", "40px");
            } else {
                $("#goTopBtn").css("display", "none");
            }
        });

        function goTop() {
            var sc = $(window).scrollTop();
            $('body,html').animate({
                scrollTop : 0
            }, 500);
        }

//滚动加载数据

$(document).ready(function(){  
        var range = 100;             //距下边界长度/单位px  
        var elemt = 500;           //插入元素高度/单位px  
        var maxnum = 5;            //设置加载最多次数  
        var num = 1;                 //当前页数
        var totalheight = 0;   
        var main = $("#main");                     //主体元素  
        var  flag=true;                  //上一页加载是否完成判断,true->加载下一页数据;false->不执行加载
        var message=$("#message");
        $(window).scroll(function(){  
        //setTimeout(time,1000);  
       // function time(){
                    var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
              
            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
            //console.log("页面的文档高度 :"+$(document).height());  
            //console.log('浏览器的高度:'+$(window).height());  
          
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  
            if(($(document).height()-range) <= totalheight  && num <maxnum&&flag==true) {  
                num++;
                 flag=false;
                //main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"'px >hello world"+srollPos+"---"+num+"</div>");  
                //num++;  
                var html="";
                $.post("inform_overlayInform.action",{"page":num},function(json){
                if(json.allPages>=num){       
                $.each(json,function(i,j){         //循环遍历数据
                     $.each(j,function(ii,jj){
                     var str=jj[0].createTime;
                     var t=str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2)+" "+str.substr(8,2)+":"+str.substr(10,2)+":"+str.substring(12);
                             html+='<tr><td>'+((ii+1)+(num-1)*5)+'</td>';
                             html+='<td>'+jj[0].content+'</td>';
                             html+='<td>'+jj[1]+'</td>';      
                             html+='<td width=20%>'+t+'</td>';  
                             html+='<td><a href=\"javascript:del(\'inform_deleteInform.action?informId='+jj[0].informId+'\')\">'+"删除"+'</a></td></tr>';                                         
                    if(((ii+1)+(num-1)*5)==json.allRecords){   
                             return false;
                    }
                     });                 
                });                
                 main .append(html);
                flag=true;
                }else{
                message.append('<h6 align=center>已经没有数据了~_~!</h6>');
                num+=maxnum;
                }
                },"json");     
            }else if(($(document).height()-range) <= totalheight  &&num==maxnum&&flag==true){
                 message.append('<h6 align=center>我只能做这么多了~_~!</h6>');
                num+=maxnum;
                }
         //  }
        });  
    }); 

 

//后台查询所返回的json数据

{"allRecords":41,"allPages":9,"page":1,"pageSize":5,"resultList":
[
[{"content":"<a href=\"http://www.baidu.com\" target=\"_blank\">http://www.baidu.com<\/a><img border=\"0\" alt=\"\" src=\"http://localhost:8081/JXED_SERVER/kindeditor/plugins/emoticons/images/13.gif\" />","sclId":"1","createTime":"20141030101151","clsId":"1","informId":"402885fa495ed0d901495ed2c45c0000","createOperId":"0","graId":"1"},"管理员"],
[{"content":"<img border=\"0\" alt=\"\" src=\"http://localhost:8081/JXED_SERVER/kindeditor/plugins/emoticons/images/35.gif\" />","sclId":"1","createTime":"20141030100712","clsId":"1","informId":"402885fa495ecbb101495ece835c0000","createOperId":"0","graId":"1"},"管理员"],
[{"content":"这是一个测试信息!!不需要太多的问题","sclId":"123","createTime":"20141029172307","clsId":"402885fa492c950d01492cbb29370003","informId":"40288540495b34a601495b373ea60001","createOperId":"0","graId":"123"},"管理员"],
[{"content":"<strong>请输入所要发布的内容!<\/strong>","sclId":"123","createTime":"20141029171454","clsId":"402885fa492c950d01492cbb29370003","informId":"40288540495b2a9001495b2fb9b70003","createOperId":"0","graId":"123"},"管理员"],
[{"content":"请输入所要发布的内容!过放电","sclId":"123","createTime":"20141029155653","clsId":"402885fa492c950d01492cbb29370003","informId":"402885fa495ab57601495ae84b880013","createOperId":"0","graId":"123"},"管理员"]
]
,"pageLink":"","params":{}}

posted @ 2014-11-19 16:26  flay  阅读(484)  评论(0编辑  收藏  举报