如何在 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).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 #
});

Answer 3

使用wire：点击Framework Livewire

// Install Livewire
composer require livewire/livewire

// Add Component
php artisan make:livewire MyComponent

在 Blade 上为组件创建布局

<main class="my-5">
    <div class="row g-2">
        @foreach ($dataRes as $item)                
            @if ($loop->first)
                <p class="p-0 m-0 fw-semibold">Showing {{ $loop->count }} of {{ $total }}</p>
            @endif
            <div class="col-sm-2 col-lg-3 col-xl-4">
                <div class="card">
                    <img src="https://dummyimage.com/1600x900/000/fff" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">{{ $loop->iteration .'. '. $item->country }}</h5>
                        <p class="card-text">Country name......</p>
                            <a href="#" class="btn btn-outline-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            @if ($loop->last)
                <p class="p-0 m-0 fw-semibold">Showing {{ $loop->count }} of {{ $total }}</p>
                <div class="d-flex justify-content-center align-items-center mt-5">
                    @if ($total > $loop->count)
                        <button class="btn btn-primary me-5" wire:click="loadMore">Load More</button>
                        <div wire:loading class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <span wire:loading class="ms-3">Load {{ $itemPerLoop }} ...</span>
                    @endif
                </div>
            @endif   
        @endforeach
    </div>
</main>

然后在组件中设置逻辑

<?php

namespace App\Http\Livewire;
use Livewire\Component;
class LoadData extends Component
{
    public $loopItem = 3;
    public $itemPerLoop = 3;
    public $data;    
    public function mount($data)
    {
        $this->data = $data;
    }
    public function render()
    {   
        $dataRes = $this->data->take($this->loopItem);
        return view('livewire.load-data' , [
            'dataRes' => $dataRes,
            'total' => $this->data->count(),
        ]);
    }
    public function loadMore(){
        $this->loopItem += $this->itemPerLoop;
        sleep(2);
    }
}