如何在Laravel中实施/执行“加载更多”或“查看更多”

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 }}

如果只希望显示“上一个”和“下一个”链接而不是页码，请使用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()
           );
      });
  });
});

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).attr('data-div')); //div to append
  $link = $(this).attr('data-link'); //current URL

  $page = $(this).attr('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).attr('data-page', (parseInt($page) + 1)); //update page #
});