Laravel中如何正确实现"显示更多"功能？点击后显示全部记录

核心问题 #

你当前的代码存在两个关键逻辑冲突，导致“显示更多”无法按预期加载部分记录：

1. 视图中用@break($item->id == 7)强制中断循环，完全忽略了控制器中simplePaginate(6)的分页规则，同时@continue($item->id == 1)在视图层跳过记录，会打乱分页数据的数量准确性。
2. “显示更多”按钮没有绑定分页跳转逻辑，点击后大概率是直接请求了全部数据，而非下一页的分页数据。

修正步骤 #

1. 修正控制器代码

直接在查询时过滤掉不需要的记录（id=1），保证分页数据的准确性：

public function index()
{
    // 过滤id不等于1的记录，然后每页返回6条
    $spec = Qualifications::where('id', '!=', 1)->simplePaginate(6);

    return view('spec', compact('spec'));
}

2. 修正视图代码

移除硬编码的@continue和@break，将“显示更多”按钮绑定到分页的下一页链接：

@foreach ($spec as $item)
    {{ $item->title }}
    <div class="spec__item-lang">
        {{ $item->lang }}
    </div>
@endforeach

{{-- 只有存在下一页时才显示按钮 --}}
@if ($spec->hasMorePages())
    <a href="{{ $spec->nextPageUrl() }}" class="spec__btn">See more</a>
@endif

如果需要实现无刷新加载（AJAX），可以给按钮绑定点击事件，通过请求下一页URL获取数据并追加到页面，示例JS逻辑：

document.querySelector('.spec__btn').addEventListener('click', function(e) {
    e.preventDefault();
    const nextUrl = this.getAttribute('href');
    
    fetch(nextUrl)
        .then(res => res.text())
        .then(html => {
            // 提取新的记录内容并追加
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;
            const newItems = tempDiv.querySelector('.spec__item-container').innerHTML; // 假设记录有统一容器
            document.querySelector('.spec__item-container').insertAdjacentHTML('beforeend', newItems);
            
            // 更新按钮的下一页URL，或者隐藏按钮
            const newNextUrl = tempDiv.querySelector('.spec__btn')?.getAttribute('href');
            if (newNextUrl) {
                this.setAttribute('href', newNextUrl);
            } else {
                this.remove();
            }
        });
});

逻辑说明 #

• 控制器层过滤数据：避免在视图层跳过记录导致分页数据“缺斤短两”，保证每页准确返回6条有效记录。
• 分页按钮绑定：利用simplePaginate自带的nextPageUrl()和hasMorePages()方法，自动判断是否存在下一页，并生成对应跳转链接，点击后加载下一页的6条数据，而非全部记录。

内容的提问来源于stack exchange，提问作者Alex