Thinkphp 加载更多

要实现的效果是这样的：

每次点击显示更多按钮，都会往下显示2条数据，直到后面没有数据了。。

 

数据表：

 

 

 

 

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'=>'获取成功！')); }

 

https://blog.csdn.net/u010081689/article/details/46702507?utm_source=blogxgwz10