如何在 Laravel 中实施/执行 "Load more" 或 "See more"

Question

仍在学习 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'
    ];
}

我想要的观点是这样的：每当我单击 查看更多 按钮时，将追加下一条记录。

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

Answer 1

正如@RossWilson 所建议的，您应该使用 paginate() 而不是 chunk()（请注意 get() 变得多余）：

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

然后，在遍历作业后在 'post.index' 视图中回显 $jobs：

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

{{ $jobs }}

如果您只想显示 "Previous" 和 "Next" link 而不是页码，请使用 simplePaginate() 代替 paginate()。您可以在 Laravel 的文档 "Simple Pagination" 下阅读更多相关信息：

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

使用分页，Laravel 会自动将页码附加到 URL 并相应地更新您的查询。

更新：这是一个关于如何使用 jQuery:

异步加载下一个 link 结果的大致示例

$(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()
           );
      });
  });
});

Answer 2

标记的答案非常正确。但是我遇到了那个答案的问题，因为它只停留在第2页，但是我把它标记为答案，因为他的想法真的很有帮助。

这是我的自定义答案。归功于@Sean Talbot 爵士，这是我回答的来源。

我的看法：

<div id="posts">
    @foreach($post AS $p)
        <p>{{ $p->name }}</p>
        <img src="{{ $p->image }}">
        <br>
    @endforeach
</div>

//specify the exact current URL inside [data-link] & dont forget to append "/post?="
<button class="see-more" data-page="2" data-link="localhost:8000/post?page=" data-div="#posts">See more</button>

我的脚本：

$(".see-more").click(function() {
  $div = $($(this).data('div')); //div to append
  $link = $(this).data('link'); //current URL

  $page = $(this).data('page'); //get the next page #
  $href = $link + $page; //complete URL
  $.get($href, function(response) { //append data
    $html = $(response).find("#posts").html(); 
    $div.append($html);
  });

  $(this).data('page', (parseInt($page) + 1)); //update page #
});

如何在 Laravel 中实施/执行 "Load more" 或 "See more"

How to implement / do "Load more" or "See more" in Laravel

laravel

laravel-5.8