ThinkPHP和jquery实现加载更多实例讲解

本文主要介绍了thinkphp+jquery实现“加载更多”功能代码,以实例代码讲诉了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下,希望能帮助到大家。

ThinkPHP+jQuery实现“加载更多”

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

ThinkPHP和jquery实现加载更多实例讲解

要实现的结果大致如下

立即学习“PHP免费学习笔记(深入)”;

第一步

模板文件

            

        

登录后复制          {volist name=”apps” id=”vo”}                      

              @@##@@

            

              

                

                  {$vo.AppName}

                8.59MB              

                

                  

                    

                                                  {$vo.DownloadCount}万次下载                        

                              下载            

                    {/volist}                          

            加载更多          

                

        

      

第二步

后台文件

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

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

登录后复制

相关推荐:

微信小程序加载更多和点击查看更多功能介绍

微信小程序加载更多和点击查看更多功能介绍

微信小程序加载更多和点击查看更多功能介绍

ThinkPHP和jquery实现加载更多实例讲解ThinkPHP和jquery实现加载更多实例讲解

以上就是ThinkPHP和jquery实现加载更多实例讲解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2789728.html

(0)
上一篇 2025年3月8日 18:46:47
下一篇 2025年2月18日 01:17:13

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • jquery mobile折叠的导航按钮实现教程

    本文主要为大家详细介绍了jquery mobile实现可折叠的导航按钮,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 本文实例为大家分享了jquery实现可折叠的导航按钮的具体代码,供大家参考,具体内容如下 功能: …

    2025年3月8日
    000
  • jQuery实现扑克正反面翻牌效果实例分享

    本文主要介绍了jquery实现扑克正反面翻牌效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧,希望能帮助到大家。 效果图: 代码如下:    【JQuery插件】扑克正反面翻牌效果  *{margin:0px;padding:0px…

    2025年3月8日
    200
  • jquery实现table排序功能实例分享

    本文主要介绍了jquery实现的table排序功能,涉及基于jquery的页面元素属性动态操作及鼠标事件响应相关技巧,需要的朋友可以参考下,希望能帮助到大家。 nbsp;html>Document   p { width: 1024p…

    2025年3月8日
    200
  • jQuery表格Table基本操作详解

    本文主要介绍了jquery表格(table)基本操作,结合实例形式分析了jquery针对表格常见的样式、属性及增删行等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 Jquery 操作 Html Table 是很方便的,这里对表格的…

    2025年3月8日
    200
  • jQuery实现简单的弹出窗口实例

    本文主要为大家详细介绍了jquery弹出窗口的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能版助到大家。 今天讲了Jquery的弹出窗口的组成和用法: 先把引用文件的代码写好: // 每个弹窗的标识var x =0;…

    2025年3月8日
    200
  • jQuery字符串全部替换的实现方法

    大家对jquery字符串全部替换了解多少?本文主要介绍jquery实现字符串全部替换的方法,具有很好的参考价值。下面跟着小编一起来看下吧,希望能帮助到大家。 大家都是知道jquery有个replace方法可以将字符串中的”&#8…

    编程技术 2025年3月8日
    200
  • jQuery的$.extend浅拷贝与深拷贝实例解析

    什么是jquery的$.extend浅拷贝与深拷贝呢?本文主要介绍了jquery的$.extend 浅拷贝与深拷贝的相关资料,需要的朋友可以参考下,希望能帮助到大家。 jQuery的$.extend 浅拷贝与深拷贝 $.extend( [d…

    编程技术 2025年3月8日
    200
  • jQuery如何实现图片滑动效果

    图片滑动在很多地方都需要,本文主要介绍了jquery实现图片滑动效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧,希望能帮助到大家。 思路:当鼠标进入元素时,触发hover中的第一个函数,离开时触发hover中的第二个函数。 如图所…

    2025年3月8日
    200
  • jquery实现折叠菜单效果实例讲解

    本文主要介绍了jquery实现折叠菜单效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧,希望能帮助到大家。 这是一个简单的折叠框效果实现,核心内容jQ库里的slideToggle()方法 效果图如下: css代码: .con_ul{…

    2025年3月8日
    200
  • jquery实现自定义图片裁剪功能代码分享

    图片自定义裁剪如何实现?本文主要介绍了jquery实现自定义图片裁剪功能,代码超级简单,易修改。下面跟着小编一起来看下吧,希望能帮助到大家。 1.自定义宽高效果 1.html 代码  index.html Title    登录后复制 2.…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论