如何在Laravel 9结合Bootstrap 5中实现onEachSide(1)自定义分页

1. 后端代码调整 #

首先确保分页实例正确调用onEachSide(1)，让Laravel自动计算需要显示的页码范围。

调整distributorRepository.php的allList方法 #

public function allList($perPage = 10)
{
    return Distributor::query()
        // 这里添加你的筛选、排序逻辑
        ->paginate($perPage)
        ->onEachSide(1); // 核心设置：当前页左右各显示1个页码
}

调整DistributorController.php的distributorList方法 #

public function distributorList()
{
    $distributors = $this->distributorRepository->allList();
    return view('distributors.list', compact('distributors'));
}

2. 自定义分页视图适配Bootstrap 5 #

修改custom-pagination.blade.php，按照Previous 1 2 ... 9 10 11 ... 19 20 Next的样式逻辑编写：

<ul class="pagination">
    <!-- 上一页按钮 -->
    @if ($paginator->onFirstPage())
        <li class="page-item disabled">
            <span class="page-link">Previous</span>
        </li>
    @else
        <li class="page-item">
            <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">Previous</a>
        </li>
    @endif

    <!-- 固定显示第一页 -->
    <li class="page-item {{ $paginator->currentPage() == 1 ? 'active' : '' }}">
        <a class="page-link" href="{{ $paginator->url(1) }}">1</a>
    </li>

    <!-- 前省略号：当前页超过「左侧显示数+1」时显示 -->
    @if ($paginator->currentPage() > $paginator->onEachSide() + 1)
        <li class="page-item disabled">
            <span class="page-link">...</span>
        </li>
    @endif

    <!-- 中间页码：当前页左右各1个 -->
    @foreach ($paginator->getUrlRange(
        max(2, $paginator->currentPage() - $paginator->onEachSide()),
        min($paginator->lastPage() - 1, $paginator->currentPage() + $paginator->onEachSide())
    ) as $page => $url)
        <li class="page-item {{ $page == $paginator->currentPage() ? 'active' : '' }}">
            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
        </li>
    @endforeach

    <!-- 后省略号：当前页小于「最后一页-右侧显示数」时显示 -->
    @if ($paginator->currentPage() < $paginator->lastPage() - $paginator->onEachSide())
        <li class="page-item disabled">
            <span class="page-link">...</span>
        </li>
    @endif

    <!-- 固定显示最后一页 -->
    @if ($paginator->lastPage() > 1)
        <li class="page-item {{ $paginator->currentPage() == $paginator->lastPage() ? 'active' : '' }}">
            <a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a>
        </li>
    @endif

    <!-- 下一页按钮 -->
    @if ($paginator->hasMorePages())
        <li class="page-item">
            <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">Next</a>
        </li>
    @else
        <li class="page-item disabled">
            <span class="page-link">Next</span>
        </li>
    @endif
</ul>

3. 在列表视图中调用自定义分页 #

在你的分销商列表视图（如distributors/list.blade.php）中，替换默认分页调用为自定义视图：

{!! $distributors->links('custom-pagination') !!}

内容的提问来源于stack exchange，提问作者MD IRFAN ALI