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

【问题标题】：How to implement / do "Load more" or "See more" in Laravel如何在 Laravel 中实现/执行“加载更多”或“查看更多”
【发布时间】：2019-07-13 18:36:10
【问题描述】：

仍在学习 Laravel Eloquent。我不知道如何在视图中实现 Load more 或 See more。

这是我的控制器：

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'
    ];
}

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

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

【问题讨论】：

我不认为块是最好的。我建议改用分页。
@RossWilson 先生，您能帮我分页吗？会很感激的。
你可以为javascript添加刀片吗？顺便说一下，你熟悉分页吗？
@RossWilson 我在我的项目中使用 jQuery、ajax 先生。据我对分页的了解，我需要在 url 中添加这个“？page = 2”来获取第二个数据。但我不知道如何将 page=2 的数据附加到 page=1
好的，很酷。我仍然需要查看您的刀片和 JavaScript 代码才能提供帮助。

标签： laravel laravel-5.8

【解决方案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()
           );
      });
  });
});

【讨论】：

感谢您的回复先生。我得到了simplePaginate。但是在“查看更多”中是否有可能，我的意思是当您单击“查看更多/加载更多”时，下一个数据会附加？
我已经更新了帖子，说明我将如何处理这个问题
好的，先生，我会试试的。等等。
先生，当我再次点击时它只停留在第 2 页
可能有点离题，但你会推荐这种方法来对抗 Laravel 的 livewire 包吗？

【解决方案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 #
});

【讨论】：