js+php实现下拉分页

声明:纯新手,有很多不足需改善,但基本功能能用,欢迎各位提出更好的建议!!!
直接上代码,可以直接复制!!!
html:

<div id="info"></div>

js:

/*起始页数,每页显示数据已经在后台写死*/
            var curPage = 1;       
            $(window).on('scroll',function(){
            /*判断当前浏览器高度,滚动条碰到时触发*/
               if($(window).scrollTop()>=$(document).height()-$(window).height()){ 
                /*如果ajax没有请求到数据直接return*/                                       
                if($(".loading").length) return;    
                    /*每触发一次就给当前页数加 1*/              
                    curPage++; 
                    /*给后端发送需要的数据*/                  
                    var postData = {
                        page:curPage,                       
                    };
                    $.post("flfg",postData, function(response){
                    $('#info').html("<div class='loading' style='color:gray;text-align:center'>正在加载,请稍后...</div>");
                       
            /*判断是否有数据*/
                            console.log(response);
                    if (response.length)
                    {
                        var datastr = '';
                        for(var i in response){  
                        var time = timestampToTime(response[i].addtime);        
                        	//根据个人需求拼接的代码                
                            datastr += '<li class="aui-list-item aui-list-item-middle" data-url="{:U('arcdetail',array('id'=>'+response[i].id+'))}">';
                            datastr += '<div class="aui-list-item-inner aui-list-item-arrow">'; 
                            datastr += '<div class="aui-list-item-title aui-ellipsis-1 ">'+response[i].title+'</div>'; 
                            datastr += '<div class="aui-list-item-right">'+time+'</div>';
                            datastr += '</div></li>'; 
        
                         }
                         /*将数据追加到对应的元素标签下*/
                          $('#shujua').append(datastr); 
                           $('#info').html("");
                    }else{   
                        /*前端需要显示的地方自己去写一个div id=info*/
                            $('#info').html("<div class='loading' style='color:gray;text-align:center'>没有更多内容了</div>");
                          /*  setTimeout(function(){
                                if($(".loading").length) $('#info').html('');
                            },800)*/                           
                        }                                             
                    }, 'json');                    
                }
            });

php:(这里是看自己的逻辑写,我的是需要原来加载一些数据,所以是这种形式!主要是看正确区间的代码)

public function flfg()
    {
        $keyword = I('keyword','');
        if($keyword){
            $where['title'] = array('like','%'.$keyword.'%');
        }
         $perPage = 20; //每页显示数据量
        if($_POST){
            //var_dump($_POST['page']);
            $page = ($_POST['page']-1) * $perPage +1;//接受页数
            $where['cid'] = 16;
            $data = M('Article')->where($where)->order('addtime desc')->limit($page,$perPage)->select();
            echo json_encode($data);
        } else {
            $where['cid'] = 16;
            $page = 0;
            $this->data = M('Article')->where($where)->order('addtime desc')->limit($page,$perPage)->select();
            $this->display();
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值