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 Object.extend
May 18 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
JavaScript手机振动API
Jun 11 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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项目应该注意的几点事项分享
2013/12/20 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
获取中文字符串的实际长度代码
2014/06/05 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
jquery使用经验小结
2015/05/20 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
python字符串排序方法
2014/08/29 Python
python绘图方法实例入门
2015/05/19 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python3爬取各类天气信息
2018/02/24 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
2015年度个人工作总结报告
2015/10/24 职场文书
2019财务转正述职报告
2019/06/27 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server