ThinkPHP+jquery實(shí)現(xiàn)“加載更多”功能代碼
ThinkPHP+jQuery實(shí)現(xiàn)“加載更多”
在很多web端界面中都會(huì)用到點(diǎn)擊按鈕加載最新幾條數(shù)據(jù)的demo,下例為使用thinkphp+jquery實(shí)現(xiàn)實(shí)例:
要實(shí)現(xiàn)的結(jié)果大致如下
第一步
模板文件
<!--軟件--> <div class="lists switcher-panel switcher-panel-cur"> <ul class="xinhao"> {volist name="apps" id="vo"} <li class="app-item link"> <div class="list-img"> <img src="/public/static/images/{$vo.Pic}" alt=""></div> <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.59MB</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>{$vo.DownloadCount}萬次下載</span></div> </div> <div class="btns"> <a class="dl-btn js-downloadBtn" rel="external nofollow" > <span></span>下載</a> </div> </li> {/volist} </ul> <if condition="count($apps) eq 5"> <div class="load-bar" id="loadmore"> <a href="javascript:;" rel="external nofollow" class="user-pl-more-btn loadmore" data-type="1">加載更多</a> </div> </if> <div class="load-bar" id="tip"> </div> </div>
第二步
后臺(tái)文件
class Index { //打印首頁 public function index() { $total=db('apps')->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'=>'獲取成功!')); } }
第三步
模板中的異步j(luò)s
<script> //加載更多 var nStart = 5; $('#loadmore').click(function() { var _this = $(".xinhao"); if(nStart >= {$total}) { //alert('后面沒有數(shù)據(jù)了!'); $("#loadmore").text('沒有數(shù)據(jù)了親...').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('<li class="app-item link">\ <div class="list-img">\ <img src="/public/static/images/'+item.Pic+'"alt=""/></div>\ <div class="list-cont">\ <div class="lt-c-tit">\ <h2>\ <a href="#nogo" rel="external nofollow" rel="external nofollow" >'+item.AppName+'</a></h2>\ <span>8.59MB</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>'+item.DownloadCount+'萬次下載</span></div>\ </div>\ <div class="btns">\ <a class="dl-btn js-downloadBtn" href="#" rel="external nofollow" >\ <span></span>下載</a>\ </div>\ </li>'); }); }); nStart += 5; } }); </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- thinkPHP5.0框架自動(dòng)加載機(jī)制分析
- thinkPHP5.0框架配置格式、加載解析與讀取方法
- thinkphp表單上傳文件并將文件路徑保存到數(shù)據(jù)庫中
- thinkphp常見路徑用法分析
- ThinkPHP中公共函數(shù)路徑和配置項(xiàng)路徑的映射分析
- ThinkPHP中URL路徑訪問與模塊控制器之間的關(guān)系
- ThinkPHP中pathinfo的訪問模式、路徑訪問模式及URL重寫總結(jié)
- ThinkPHP模板替換與系統(tǒng)常量及應(yīng)用實(shí)例教程
- ThinkPHP中的系統(tǒng)常量和預(yù)定義常量集合
- thinkphp中常用的系統(tǒng)常量和系統(tǒng)變量
- thinkphp5 加載靜態(tài)資源路徑與常量的方法
相關(guān)文章
jQuery基于$.ajax設(shè)置移動(dòng)端click超時(shí)處理方法
這篇文章主要介紹了jQuery基于$.ajax設(shè)置移動(dòng)端click超時(shí)處理方法,分析了click事件與touchstart事件的原理與處理技巧,需要的朋友可以參考下2016-05-05jquery動(dòng)態(tài)添加刪除一行數(shù)據(jù)示例
這篇文章主要介紹了jquery如何動(dòng)態(tài)添加刪除一行數(shù)據(jù),需要的朋友可以參考下2014-06-06基于jquery的一個(gè)OutlookBar類,動(dòng)態(tài)創(chuàng)建導(dǎo)航條
初學(xué)jquery,如有錯(cuò)誤,請(qǐng)高手們指出想看效果及完整代碼的可以下載rar包2010-11-11Enter回車切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼兼容各大瀏覽器
這篇文章主要介紹了Enter回車切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼并兼容各大瀏覽器,需要的朋友可以參考下2014-09-09jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法,實(shí)例分析了jQuery操作div塊拖動(dòng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)存在form表單的添加、提交,不存在form表單的添加、提交,ajax、非ajax形式提交等數(shù)據(jù)添加與表單提交操作技巧,需要的朋友可以參考下2018-07-07jquery實(shí)現(xiàn)通用版鼠標(biāo)經(jīng)過淡入淡出效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的通用版鼠標(biāo)經(jīng)過淡入淡出效果,需要的朋友可以參考下2014-06-06