首頁 > 文章 > web前端 > ThinkPHP和jquery實作載入更多實例講解

ThinkPHP和jquery實作載入更多實例講解

小云云原創: 2018-01-22 16:41:592005瀏覽

本文主要介紹了ThinkPHP+jquery實現「加載更多」功能代碼，以實例代碼講訴了加載更多的代碼實現,非常具有實用價值,需要的朋友可以參考下，希望能幫助到大家。

ThinkPHP+jQuery實作「載入更多」

在許多web端介面中都會用到點擊按鈕載入最新幾條資料的demo,下例為使用thinkphp+jquery實作實例：

要實現的結果大致如下

#第一步

範本檔案

      <!--软件-->
      <p class="lists switcher-panel switcher-panel-cur">
        <ul class="xinhao">
          {volist name="apps" id="vo"}
          <li class="app-item link">
            <p class="list-img">
              <img src="/public/static/images/{$vo.Pic}" alt=""></p>
            <p class="list-cont">
              <p class="lt-c-tit">
                <h2>
                  <a href="#nogo" rel="external nofollow" rel="external nofollow" >{$vo.AppName}</a></h2>
                <span>8.59MB</span></p>
              <p class="lt-c-s-n">
                <p class="lt-c-s-n-l">
                  <p class="star">
                    <p style="width: 73%;"></p>
                  </p>
                </p>
                <span>{$vo.DownloadCount}万次下载</span></p>
            </p>
            <p class="btns">
              <a class="dl-btn js-downloadBtn" href="http://shouji.360tpcdn.com/170214/5aeae868026625e95b389b357fbdd186/com.ss.android.article.video_116.apk" rel="external nofollow" >
                <span></span>下载</a>
            </p>
          </li>
          {/volist}
        </ul>
        <if condition="count($apps) eq 5">
          <p class="load-bar" id="loadmore">
            <a href="javascript:;" rel="external nofollow" class="user-pl-more-btn loadmore" data-type="1">加载更多</a>
          </p>
        </if>
        <p class="load-bar" id="tip">
        </p>
      </p>

第二步

後台檔案

class Index
{
  //打印首页
  public function index()
  {
    $total=db(&#39;apps&#39;)->count();
    $apps=db(&#39;apps&#39;)->where(&#39;AppStatus&#39;,1)->limit(5)->order("AppID ASC")->select();
    //var_dump($apps);
    $view = new View();
    $view->assign(&#39;total&#39;,$total);
    $view->assign(&#39;apps&#39;,$apps);
    return $view->fetch(&#39;index&#39;);
  }

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

}

第三步

模板中的非同步js

  <script>
    //加载更多
    var nStart = 5;
    $(&#39;#loadmore&#39;).click(function() {
      var _this = $(".xinhao");
      if(nStart >= {$total}) {
        //alert(&#39;后面没有数据了！&#39;);
        $("#loadmore").text(&#39;没有数据了亲...&#39;).css({"border-top":"1px solid #d4d5d6","height":"30px","line-height":"30px"});
        return false;
      } else {
        $.post("{:url(&#39;Index/data&#39;)}", {start: nStart}, function(res) {
          $.each(res[&#39;result&#39;], function(i, item) {
            _this.append(&#39;<li class="app-item link">\
              <p class="list-img">\
              <img src="/public/static/images/&#39;+item.Pic+&#39;"alt=""/></p>\
              <p class="list-cont">\
              <p class="lt-c-tit">\
              <h2>\
              <a href="#nogo" rel="external nofollow" rel="external nofollow" >&#39;+item.AppName+&#39;</a></h2>\
            <span>8.59MB</span></p>\
            <p class="lt-c-s-n">\
              <p class="lt-c-s-n-l">\
              <p class="star">\
              <p style="width: 73%;"></p>\
              </p>\
              </p>\
              <span>&#39;+item.DownloadCount+&#39;万次下载</span></p>\
            </p>\
            <p class="btns">\
              <a class="dl-btn js-downloadBtn" href="#" rel="external nofollow" >\
              <span></span>下载</a>\
              </p>\
              </li>&#39;);
          });
        });
        nStart += 5;
      }
    });
    </script>

ThinkPHP和jquery實作載入更多實例講解

相關文章