加载更多功能的实现

加载更多功能的实现

当要显示的数据量非常大时，如果我们一下子显示全部，往往不利于网站优化

效果图：

 那么这个效果是如何实现的呢？

以tp5举例：

主页显示的数据设置为5，就是刚加载时只显示5条，每点击一次新加载5条（这些数据可以自己决定）

主页的控制器：Index.php:

public function index(){
    // 显示文章列表 只显示5条
        $article = DB::table('article')->order('date desc')->limit(2)->select();
        $this->assign('article',$article);
        return $this->fetch();
}

对应的视图：绑定load事件

<div id="article">
	{volist name="article" id="vo"}
	<div class="article">
		//...显示文章的具体纤细
	</div>
	{/volist}
<!--加载更多的按钮-->
	<div data-page="0" id="load-more" onclick="load(this)">阅读更多</div>
</div>

load事件：（传给后台的数据是data-page自定义属性值，点击后自增1）

function load(obj){
	var page = obj.getAttribute('data-page');
	// 提示正在加载
	$('#load-more').html('loading ......');
	$.ajax({
	        type:'POST',
	        url:ThinkPHP['ROOT']+'/index.php/index/index/more',
	        data:{
		    'page':page,
	        },
	        success:function(res){
		    if(res==''){
		        $('#load-more').html('没有更多数据了').css('color','red');
			return false;
		    }
		    $('#load-more').html('阅读更多');
		    $('#load-more').before(res);
		    page++;
		    obj.setAttribute('data-page',page);
		}
	})
}

 

对应控制器加载更多的more方法：（每次根据前台传的值进行查询）

public function more(){
    if($this->request->isAjax()){
        $firstNum = 5;  //最先显示的条数
        $num = 5;       //点击一次显示的条数
        $page = input('post.page'); //接收的page 动态的
       // 显示文章列表 
        $n = $firstNum+($page*$num);
        $article = DB::table('article')->order('date desc')->limit($n,$num)->select();
            //返回数据
        $this->assign('ajaxArticle', $article);
        return $this->fetch();  //返回视图
    }
}

对应返回的视图：more.html

{volist name="ajaxArticle" id="vo"}
<div class="article">
//....文章的具体内容
</div>
{/volist}
 
 
 

ajax请求成功后将数据（整个视图）填充到 内容区（加载更多的前面）

success:function(res){
    if(res==''){
	$('#load-more').html('没有更多数据了').css('color','red');
        return false;
    }
    $('#load-more').html('阅读更多');
    $('#load-more').before(res);
    page++;
    obj.setAttribute('data-page',page);
}

这个流程就是

ajax请求->控制器查询返回视图->ajax成功后在回调函数中把数据（视图）填充到内容区。