ThinkPHP and jquery implement loading to explain more examples

This article mainly introduces the code of ThinkPHP+jquery to implement the "load more" function, and uses example code to explain the code implementation of loading more. It is of great practical value. Friends who need it can refer to it. I hope it can help everyone.

ThinkPHP+jQuery implements "load more"

In many web interfaces, demos that click buttons to load the latest pieces of data are used. The following example uses thinkphp+jquery Implementation example:

The result to be achieved is roughly as follows

First step

Template file

      <!--软件-->
      <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="/static/imghwm/default1.png"  data-src="/public/static/images/{$vo.Pic}"  class="lazy"   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>

The second step

Backend file

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'=>'获取成功！'));
  }

}

The third step

Template Asynchronous js in

  <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="/static/imghwm/default1.png"  data-src="/public/static/images/&#39;+item.Pic+&#39;"  class="lazy"  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>

Related recommendations:

WeChat applet loads more and click to view more feature introductions

Angularjs scrolls to load more data

js implements loading more functional examples

The above is the detailed content of ThinkPHP and jquery implement loading to explain more examples. For more information, please follow other related articles on the PHP Chinese website!