要实现的效果是这样的:
每次点击显示更多按钮,都会往下显示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'=>'获取成功!'));
}
欢迎关注技术开发分享录:http://fenxianglu.cn/