Laravel分页样式可以自定义吗

wen PHP项目 2026-07-12 207

本文目录导读：

Laravel分页样式可以自定义吗

使用默认分页视图（最常用）
使用自定义视图名称
创建全新的分页视图
使用 Tailwind CSS 样式（Laravel 9+ 默认）
使用 Bootstrap 5 样式
在视图中指定自定义分页
全局更改默认分页视图
添加自定义CSS样式
使用 JavaScript 增强分页
推荐最佳实践

是的,Laravel的分页样式可以完全自定义，Laravel提供了灵活的分页定制方式，以下是几种常见的自定义方法：

使用默认分页视图（最常用）

发布分页视图到资源目录

php artisan vendor:publish --tag=laravel-pagination

这会在 resources/views/vendor/pagination/ 创建分页模板文件。

自定义分页模板

编辑 resources/views/vendor/pagination/bootstrap-4.blade.php（或其他模板）：

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination custom-pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled" aria-disabled="true">
                    <span class="page-link">@lang('pagination.previous')</span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
                </li>
            @endif
            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
                @endif
                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
                        @else
                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                        @endif
                    @endforeach
                @endif
            @endforeach
            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true">
                    <span class="page-link">@lang('pagination.next')</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

使用自定义视图名称

在控制器或视图中指定自定义视图：

// 在控制器中
$users = User::paginate(10);
$users->withPath('/custom/url');
$users->onEachSide(2); // 控制页码两侧显示数量
// 使用自定义模板
$users->links('vendor.pagination.custom-pagination');

创建全新的分页视图

在 resources/views/vendor/pagination/ 创建新文件，如 custom.blade.php：

@if ($paginator->hasPages())
    <div class="flex items-center justify-between border-t border-gray-200 px-4 py-3 sm:px-6">
        <div class="flex flex-1 justify-between sm:hidden">
            @if ($paginator->onFirstPage())
                <span class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700">Previous</span>
            @else
                <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
            @endif
            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
            @else
                <span class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700">Next</span>
            @endif
        </div>
    </div>
@endif

使用 Tailwind CSS 样式（Laravel 9+ 默认）

@if ($paginator->hasPages())
    <nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
        <div class="flex justify-between flex-1 sm:hidden">
            @if ($paginator->onFirstPage())
                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-md">
                    {!! __('pagination.previous') !!}
                </span>
            @else
                <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                    {!! __('pagination.previous') !!}
                </a>
            @endif
            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                    {!! __('pagination.next') !!}
                </a>
            @else
                <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-md">
                    {!! __('pagination.next') !!}
                </span>
            @endif
        </div>
    </nav>
@endif

使用 Bootstrap 5 样式

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination pagination-lg justify-content-center">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled">
                    <span class="page-link">&laquo;</span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</a>
                </li>
            @endif
            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                @if (is_string($element))
                    <li class="page-item disabled"><span class="page-link">{{ $element }}</span></li>
                @endif
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
                        @else
                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                        @endif
                    @endforeach
                @endif
            @endforeach
            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">&raquo;</a>
                </li>
            @else
                <li class="page-item disabled">
                    <span class="page-link">&raquo;</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

在视图中指定自定义分页

{{ $users->links('vendor.pagination.custom') }}
{{-- 或者使用Bootstrap 4 --}}
{{ $users->links('pagination::bootstrap-4') }}
{{-- 或者使用Bootstrap 5 --}}
{{ $users->links('pagination::bootstrap-5') }}
{{-- 或者使用Tailwind --}}
{{ $users->links('pagination::tailwind') }}

全局更改默认分页视图

在 AppServiceProvider 中设置：

use Illuminate\Pagination\Paginator;
public function boot()
{
    Paginator::defaultView('vendor.pagination.custom');
    Paginator::defaultSimpleView('vendor.pagination.custom');
}

添加自定义CSS样式

.custom-pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.custom-pagination li {
    margin: 0 5px;
}
.custom-pagination li a,
.custom-pagination li span {
    display: block;
    padding: 8px 16px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
    border-radius: 4px;
}
.custom-pagination li.active span {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.custom-pagination li.disabled span {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

使用 JavaScript 增强分页

// 添加平滑滚动效果
document.querySelectorAll('.pagination a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const url = this.getAttribute('href');
        // 使用 AJAX 加载下一页内容
        fetch(url)
            .then(response => response.text())
            .then(html => {
                // 更新内容区域
                document.getElementById('content-area').innerHTML = html;
                // 滚动到顶部
                window.scrollTo({ top: 0, behavior: 'smooth' });
            });
    });
});