频道导航

ThinkPHP+jquery实现“加载更多”功能代码

2019-01-07 ThinkPHP 前端之家

前端之家收集整理的这篇文章主要介绍了ThinkPHP+jquery实现“加载更多”功能代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

ThinkPHP+jQuery实现“加载更多”

在很多web端界面中都会用到点击按钮加载最新几条数据的demo,下例为使用thinkPHP+jquery实现实例：

要实现的结果大致如下

第一步

模板文件

{$vo.AppName} 8.59MB

{$vo.DownloadCount}万次下载

下载

{/volist}

第二步

后台文件

count(); $apps=db('apps')->where('AppStatus',1)->limit(5)->order("AppID ASC")->select(); //var_dump($apps); $view = new View(); $view->assign('total',$total); $view->assign('apps',$apps); return $view->fetch('index'); }

public function data()
{
$start = Input('post.start');
//echo($start);
$list = db('apps')->limit($start,5)->order('AppID asc')->select();
return (array( 'result'=>$list,'status'=>1,'msg'=>'获取成功！'));
}

}

第三步

模板中的异步js

//加载更多 var nStart = 5; $('#loadmore').click(function() { var _this = $(".xinhao"); if(nStart >= {$total}) { //alert('后面没有数据了！'); $("#loadmore").text('没有数据了亲...').css({"border-top":"1px solid #d4d5d6","height":"30px","line-height":"30px"}); return false; } else { $.post("{:url('Index/data')}",{start: nStart},function(res) { $.each(res['result'],function(i,item) { _this.append('

\ '+item.AppName+'\ 8.59MB

\ '+item.DownloadCount+'万次下载

\ 下载\

\ '); }); }); nStart += 5; } });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/thinkphp/40794.html

ThinkPHP教程