JQ自動加載函數: 分頁加懶加載

JS:

    var _page = 1, _words = '', _loadDone = false;
        //當滾動條即將到達底部自動加載數據
        $(window).scroll(function () {
            //下面這句主要是獲取網頁的總高度,主要是考慮兼容性所以把Ie支持的documentElement也寫了,這個方法至少支持IE8
            var htmlHeight = $(document).height();
            //clientHeight是網頁在瀏覽器中的可視高度,
            var clientHeight = $(window).height();
            //scrollTop滾動條到頂部的垂直高度
            var scrollTop = $(document).scrollTop();
            //通過判斷滾動條的top位置與可視網頁之和與整個網頁的高度是否相等來決定是否加載內容;
            //
            // console.log(htmlHeight);
            // console.log(clientHeight);
            // console.log(scrollTop);
            var he = scrollTop + clientHeight;
            //當第一頁數據加載完後再次滾動大於1px時,自動加載第二頁,_page++,根據第一頁加載幾條數據決定高度
            if (scrollTop >= 600) {
                _loadList();
            }
        })
        _loadList();
        function _loadList()
        {
            if(_loadDone) return false;
            ajaxHidePost("{:U('vote_list')}", {page:_page,word:_words}, function(d){
                if(d.page <= 1 && d.list.length <= 0)
                {
                    _loadDone = true;
                    $('#itemBox').empty().append('<div style="color:#a7a7a7;text-align:center; font-size:0.7rem">暫無數據</div>');
                }else{
                    var _html = '', _errImg = '__HOME__/icon_nopic.png';
                    $.each(d.list,function(i,v){
                    _html += '    <div class="user user-pic">\n' +
                        '            <span class="number" style="background:#ff6a6a">'+v.id+'</span>\n' +
                        '            <a href="/home/Member/vote_detail&id='+v.id+'">\n' +
                        '                <img class="lazy" data-original="'+v.img+'" alt="士大夫" src="'+v.img+'" style="display: inline-block;">\n' +
                        '            </a>\n' +
                        '            <div class="info">\n' +
                        '                <p class="username iconfont icon-user">'+v.name+'</p>\n' +
                        '                <p class="coupons iconfont icon-upper">\n' +
                        '                    <span class="piao">'+v.vote_total+'</span>票\n' +
                        '                </p>\n' +
                        '            </div>\n' +
                        '            <button rel="{$member_id}" vote_num="'+v.vote_id+'" class="vote-btn dotoupiao" style="background:#ff6a6a" code="'+v.id+'" nickname="'+v.name+'">投票</button>\n' +
                        '        </div>\n';

                    });
                    if(_page <= 1) $('#itemBox').empty();
                    $('#itemBox').append(_html);
                    _loadDone = d.done == '1' ? true : false;
                    if(!_loadDone) _page++;
                }
            });
        }
        var _pubAjax = false;
        function ajaxHidePost(url, param, callback)
        {
            if(_pubAjax) return false;
            _pubAjax = true;
            $.ajax({
                type: "post",
                url: url,
                data: param,
                dataType: "json",
                success: callback,
                error: function() { _pubAjax = false;},
                complete: function() { _pubAjax = false;},
            });
        }

PHP:

 public function vote_list()
    {
        $vote_id = 1;
        $page = intval($_POST['page']) > 0 ? intval($_POST['page']) : 1;
        $keyword = trim($_POST['word']) ? : '';
        $limit = 6;


        if($keyword){
            $count = D('VoteItem')->where(['name'=>['like','%'.$keyword.'%']])->where(['vote_id'=>$vote_id])->count();
            $totalPage = ceil($count / $limit);
        }else{
            $count = D('VoteItem')->where(['vote_id'=>$vote_id])->count();
            $totalPage = ceil($count / $limit);
        }

        $list = D('VoteItem');
        if($keyword){
            $list = $list->where(['name'=>['like','%'.$keyword.'%']]);
        }
        $list = $list
                    ->page($page, $limit)
                    ->where(['vote_id'=>$vote_id])
                    ->order('id asc')
                    ->select();

        $list_all = [];
        foreach ($list as $i => $node){
            $total_record = D('VoteRecord')
                ->group('vote_item_id')
                ->where(['vote_item_id'=>$node['id']])
                ->count();
            $list_all[$i] = $node;
            if($total_record){
                $list_all[$i]['vote_total'] = $total_record;
            }else{
                $list_all[$i]['vote_total'] = 0;
            }

        }

//        dump($list_all);exit;
        $this->ajaxReturn([
            'done' => $page >= $totalPage ? '1' : '0',
            'page' => $page,
            'list' => !count($list) ? '' : $list_all,
        ]);
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章