zoukankan      html  css  js  c++  java
  • Thinkphp 加载更多

    要实现的效果是这样的:


    每次点击显示更多按钮,都会往下显示2条数据,直到后面没有数据了。。

    数据表:


     

    articleList模板文件

    <include file="./Application/Common/View/Public/header.html" />
    <div class="container">
    <volist name="list" id="vo">
    <div class="panel panel-default">
    <div class="panel-heading">{$vo.title}</div>
    <div class="panel-body">{$vo.content}</div>
    </div> </volist>
    <if condition="count($list) eq 5">
    <a class="btn btn-block btn-default" style="margin-bottom: 20px;" href="javascript:;">显示更多</a>
    </if>
    </div>
    <script>
    var nStart = 5;
    $('.btn').click(function() {

    var _this = $(this); if(nStart >= {$total}) {
    alert('后面没有数据了!'); _this.text('后面没有数据了');

    return false; } else {
    $.post("{:U('articleAjax')}", {start: nStart},

    function(res) { $.each(res['result'], function(i, item) { _this.before('<div class="panel panel-default"> <div class="panel-heading">'+item.title+'</div> <div class="panel-body">'+item.content+'</div> </div>'); }); }); nStart += 2; } });
    </script> <include file="./Application/Common/View/Public/footer.html" />

    Index控制器中的articleList方法和articleAjax返回方法

    // 文章列表
    public function articleList() { $article = M('article'); $total = $article->count(); $this->assign('total', $total); $list = $article->limit(5)->order('id asc')->select(); $this->assign('list', $list); $this->display(); } // ajax异步加载文章
    public function articleAjax() { $article = M('article'); $start = I('post.start'); $list = $article->limit($start, 2)->order('id asc')->select(); $this->ajaxReturn(array( 'result'=>$list,'status'=>1, 'msg'=>'获取成功!')); }

    https://blog.csdn.net/u010081689/article/details/46702507?utm_source=blogxgwz10

  • 相关阅读:
    Java基础知识点总结(四)
    Java基础知识点总结(三)
    用easyui实现查询条件的后端传递并自动刷新表格的两种方法
    在JDBC中实现SQL语句的模糊查询
    向DataGrid数据表格增加查询搜索框
    Java基础知识点总结(二)
    easyui中formatter的用法
    腾讯云+阿里云 搭建hadoop + hbase
    -- 记录 -- 问题记录
    -- 1 -- springboot
  • 原文地址:https://www.cnblogs.com/lxwphp/p/9854503.html
Copyright © 2011-2022 走看看