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


Posted in Javascript onMarch 11, 2017

ThinkPHP+jQuery实现“加载更多”

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

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

要实现的结果大致如下

第一步

模板文件

<!--软件-->
      <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" href="http://shouji.360tpcdn.com/170214/5aeae868026625e95b389b357fbdd186/com.ss.android.article.video_116.apk" 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>

第二步

后台文件

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

}

第三步

模板中的异步js

<script>
    //加载更多
    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('<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 #Javascript
基于Bootstrap框架实现图片切换
Mar 10 #Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 #Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 #Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 #Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 #Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 #Javascript
You might like
PHP与服务器文件系统的简单交互
2016/10/21 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
Python入门之modf()方法的使用
2015/05/15 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
python实现数据写入excel表格
2018/03/25 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
django中使用POST方法获取POST数据
2019/08/20 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
2016教师暑期培训学习心得体会
2016/01/09 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL