articleList模板文件

<include file="./Application/Common/View/Public/header.html" />

<div class="container">
    <volist name="list" id="vo">
        <div class="panel panel-default">
            <div class="panel-heading">{$vo.title}</div>
            <div class="panel-body">{$vo.content}</div>
        </div>
    </volist>

    <if condition="count($list) eq 5">
        <a class="btn btn-block btn-default" style="margin-bottom: 20px;" href="javascript:;">显示更多</a>
    </if>
</div>
<script>

    var nStart = 5; 
    $('.btn').click(function() {
        var _this = $(this);
        if(nStart >= {$total}) {
            alert('后面没有数据了！');
            _this.text('后面没有数据了');
            return false;
        } else {
            $.post("{:U('articleAjax')}", {start: nStart}, function(res) {
                $.each(res['result'], function(i, item) {
                    _this.before('<div class="panel panel-default">\
                        <div class="panel-heading">'+item.title+'</div>\
                    <div class="panel-body">'+item.content+'</div>\
                </div>');
                });
            });
            nStart += 2;
        }
    });
</script>

<include file="./Application/Common/View/Public/footer.html" />

Index控制器中的articleList方法和articleAjax返回方法

// 文章列表
public function articleList()
{
    $article = M('article');
    $total = $article->count();
    $this->assign('total', $total);
    $list = $article->limit(5)->order('id asc')->select();
    $this->assign('list', $list);
    $this->display();
}

// ajax异步加载文章
public function articleAjax() {
    $article = M('article');
    $start = I('post.start');
    $list = $article->limit($start, 2)->order('id asc')->select();
    $this->ajaxReturn(array( 'result'=>$list,'status'=>1, 'msg'=>'获取成功！'));
}

文章来源: Thinkphp 加载更多

人吐槽

人点赞

发表评论