Thinkphp 加载更多

Thinkphp 加载更多

要实现的效果是这样的:

Thinkphp 加载更多

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

 

数据表:

 

Thinkphp 加载更多

 

 

 

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/112765.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号