ThinkPHP jquery实现"加载更多"功能代码

ThinkPHP jQuery实现"加载更多"

在很多网端界面中都会用到点击按钮加载最新几条数据的演示，下例为使用thinkphp jquery实现实例：

要实现的结果大致如下

第一步

模板文件

！-软件-div class=' list switcher-panel switcher-panel-cur ' ul class=' xinhao ' { volist name=' apps ' id=' VO ' } Li class=' app-item link ' div class=' list-img ' img src=' http :/public/static/images/{ $ VO .pic } ' alt=' '/div class=' list-cont ' div class=' lt-c-tit ' H2 a href=' # nogo ' rel=' external nofollow ' rel=' external nofollow '($ VO .AppName }/a/H2 span 8.59 MB/span/div class=' lt-c-s-n ' div class=' lt-c-s-n-l ' div class=' star ' p style=' width : 73%；'/p /div /div span{$vo .DownloadCount}万次下载/span/div/div class=' btns ' a class=' dl-BTN js-downloadBtn ' href=' http://姬寿。360 tpdn。com/170214/5 aeae 868026625 e 95 b 389 b 357 fbdd 186/com。党卫军。安卓。文章。视频_ 116。apk ' rel='外部nofollow ' span/span下载/a /div /li {/volist} /ul if条件=' count($ apps)eq 5 ' div class=' load-bar ' id=' load more ' a href=' JavaScript :'rel='外部无跟随' class=' user-pl-more-BTN加载更多'数据类型=' 1 '加载更多/a/div/if div class=' load-bar ' id=' tip '/div/div第二步

后台文件

类索引{ //打印首页公共函数索引(){ $ total=db(' apps ')-count()；$ apps=db(' apps ')-其中(' AppStatus '，1)-限制(5)-顺序(' AppID ASC ')-选择()；//var _ dump($ apps)；$ View=new View()；$view-assign('total '，$ total)；$view-assign('apps '，$ apps)；返回$ view-fetch(' index ')；}公共函数数据(){ $ start=Input(' post。start’)；//echo($ start)；$list=db('apps')-limit($start，5)-order(' AppID ASC ')-select()；return (array('result'=$list，' status'=1，' msg'='获取成功!'));}}第三步

模板中的异步射流研究…

脚本/加载更多var n start=5；$('#loadmore ').单击(function() { var _this=$(').新浩');if(nStart={$total}) { //alert('后面没有数据了!');$('#loadmore ').文本('没有数据了亲.').css({'border-top':'1px实线#d4d5d6 '，'高度' :'30px '，'行高' : ' 30px ' })；返回false} else { $ .post('{:url('Index/data')} '，{start: nStart}，function(res) { $ .每个(res['result']，函数(一、项){ _本。追加(' Li类=' app-item link ' \ div类=' list-img ' \ img src=' http :/public/static/images/'项pic ' ' alt=' '//div \ div class=' list-cont ' \ div class=' lt-c-tit ' \ H2 \ a href=' # nogo ' rel=' external nofollow ' rel=' external nofollow '项.AppName '/a/H2 \ span 8.59 MB/span/div \ div class=' lt-c-s-n ' \ div class=' lt-c-s-n-l ' \ div class=' star ' \ p style=' width : 73%；/p\ /div\ /div\ span '项。"下载计数"万次下载/span/div \/div \ div class=' BTN ' \ a class=' dl-BTN js-DownLoadBtn ' href=' # ' rel='外部' nofollow' \ span/span下载/a \/div \/Li '；});});n start=5；} });/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。