首页 > 解决方案 > 如何在 Laravel 中实现/执行“加载更多”或“查看更多”

问题描述

仍在学习 Laravel Eloquent。我不知道如何实现加载更多查看更多视图。

这是我的控制器:

public function index(){
    $job = Post::orderBy('created_at', 'DESC')->get()->paginate(3);
    return view('post.index', compact('job'));
}

Post.php

class Post extends Model
{
    protected $table = 'posts';
    protected $fillable = [
        'id',
        'name',  
        'image',
        'created_at',
        'updated_at'
    ];
}

我想要的视图是这样在此处输入图像描述 的:每当我单击按钮查看更多时,下一条记录将附加。

有人可以帮助我如何以正确和最干净的方式做到这一点。

标签: laravellaravel-5.8

解决方案


正如@RossWilson 建议的那样,您应该使用paginate()代替chunk()(并注意这get()变得多余):

$jobs = Post::orderBy('created_at', 'DESC')->paginate(3);

然后,$jobs在遍历作业后在“post.index”视图中回显:

@foreach ($jobs as $job)
    <div class="job">{{ $job->name }} ...</div>
@endforeach

{{ $jobs }}

如果您希望只显示“上一个”和“下一个”链接而不是页码,请使用simplePaginate(). paginate()您可以在 Laravel 文档的“简单分页”下阅读更多相关信息:

https://laravel.com/docs/5.8/pagination

通过分页,Laravel 会自动将页码附加到 URL 并相应地更新您的查询。

更新:这是一个近似示例,说明如何使用 jQuery 异步加载下一个链接结果:

$(function() {
  var $posts = $("#posts");
  var $ul = $("ul.pagination");
  $ul.hide(); // Prevent the default Laravel paginator from showing, but we need the links...

  $(".see-more").click(function() {
      $.get($ul.find("a[rel='next']").attr("href"), function(response) {
           $posts.append(
               $(response).find("#posts").html()
           );
      });
  });
});

推荐阅读