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)


相关推荐

  • 深度剖析原理!java培训网课代理[通俗易懂]

    深度剖析原理!java培训网课代理[通俗易懂]前言想必很多人在为接下来的金九银十做准备,或许你只是想找到一份工作,亦或许你希望通过今年最后这波拿到一个理想的工作和薪酬。不管是哪一种情况,你都需要提前做好准备,而不是临时抱佛脚。LZ为大家分享的这些面试真题一定要基于自己的技术栈来思考,而不是背一下就觉得这个我会了。试想一下,如果面试官接着往深处问,你能保证自己回答的上来吗?这样的跳槽方式在以前或许还比较适用,但是在今年一定是没有效果的,没有意义的。LZ把这350道Java面试真题分成了五大专题,分别是:性能优化、微服务架构、并发编程(高级)、开源框

  • UART接口控制器

    UART接口控制器主设备与从设备通过总线来进行数据通信,是一个数字系统不可或缺的一部分,本篇讲述一种常见的总线控制器UART串行数据接口,也称为串口。串口的标准一般有,RS-232、RS-422与RS-485标准,我们讲述的是RS-232接口信号。1、接口信号定义RS-232最常见的是9脚接口表1-1:RS-232接口定义在实际的应用中,我们只需要关注两个接口,数据接收(RXD)和数据发送(TXD),而…

  • vscode快捷键重置及快捷键恢复

    vscode快捷键重置及快捷键恢复在用vscode设置快捷键的时候,有的快捷键和自己设置的有重复和冲突现象,为了图方便我把与自己冲突的快捷键都删除了,结果导致键盘的删除按键用不了,相当于自己写的代码无法删除了。最后还是在官网上找到解决办法。 首先找到键盘快捷设置 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191128152918849.png) ![在这里插入图片描述](http…

  • pycharm激活码 2022.01.13_最新在线免费激活

    (pycharm激活码 2022.01.13)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • 树莓派设置开机自启动详细_树莓派开机要多久

    树莓派设置开机自启动详细_树莓派开机要多久文章目录安装树莓派系统连接树莓派一、接外设直接当作电脑来用二、远程连接有网线ssh远程连接使用xrdp远程桌面使用VNC远程连接树莓派桌面无网线一些常用指令安装树莓派系统1、打开树莓派下载官网下载压缩包文件,需要解压NOOBS版本和Raspbian版本有什么区别呢?两者都是安装Raspbian系统的,Raspbian版本写入U盘插到树莓派就能直接用,而NOOBS是一个交互式引导安装,需…

    2022年10月14日
  • labelme怎么安装_putty安装教程

    labelme怎么安装_putty安装教程Labelme安装教程(基于anaconda)1.创建anaconda虚拟环境labelmecondacreate-nlabelmepython=3.6完成之后如图所示(由于我已经创建了labelme故这里用labelme1代替)激活环境:condaactivatelabelme执行完这一步会发现运行环境转移到了labelme,如果没有重新创建2.安装labelme所需要的依赖环境安装的时候使用pip或者conda都可以,两者之中有一个不行时尝试使用另一个,我在安装的时

发表回复

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

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