本文共 2425 字，大约阅读时间需要 8 分钟。

Laravel 提供的默认分页样式可能不够美观，想自己定制样式？别担心，Laravel 支持自定义分页样式配置。以下是实现自定义分页样式的详细指南。

1.1. 自定义分页样式的实现步骤

首先，建议在 common/pagination.blade.php 文件中创建一个共用的分页模板文件。这样可以集中管理所有页面栏样式的代码，避免重复代码冗余。

{{-- pagination-start--}}@if ($paginator->hasPages())    
   
            {{-- Previous Page Link --}}        @if (! $paginator->onFirstPage())            
    
                上一页            
        @else            
    
                上一页            
        @endif        {{-- Pagination Elements --}}        @foreach ($elements as $element)            @if (is_string($element))                
    
                    {{ $element }}                
            @elseif (is_array($element))                @foreach ($element as $page => $url)                    @if ($page == $paginator->currentPage())                        
    
                            {{ $page }}                        
                    @else                        
    
                            {{ $page }}                        
                    @endif                @endforeach            @endif        @endforeach        {{-- Next Page Link --}}        @if ($paginator->hasMorePages())            
    
                下一页            
        @else            
    
                最后一页            
        @endif    
   
{{-- pagination-end--}}

1.2. 样式润色方案

为了实现自定义样式，可以简单地对现有样式进行 CSS 修改。以下是一个典型的实现方案：

.pagination {    display: flex;    justify-content: center;    align-items: center;    gap: 2px;    margin: 20px auto;    padding: 0 15px;    background-color: #fff;    border-radius: 5px;    box-shadow: 0 1px 3px rgba(0,0,0,0.1);}.pagination ul {    list-style: none;    padding: 0;    margin: 0;}.pagination li {    padding: 8px;    margin: 0 5px;    border-radius: 3px;    background-color: #f8f9fa;    position: relative;    cursor: pointer;}.pagination li:hover {    background-color: #f1f3f5;}.pagination li.active {    background-color: #007bff;    color: white;}.pagination li.active span {    color: white;}.pagination a {    color: #333;    text-decoration: none;    padding: 8px;}.pagination a:hover {    color: #1894b8;}

1.3. 模板调用方式

在你的页面布局文件中，只需要在需要分页的地方调用以下代码即可：

{{ $lists->links('common.pagination') }}

1.4. 示例展示

在实际应用中，分页栏的显示效果将类似于以下样式：

1 2 3 ... 5 6上一页 下一页

注意事项

• 可以根据实际应用需求，灵活定制 CSS 样式。

• 如果需要更复杂的分页样式，可以根据需要添加更多的分页状态控制逻辑。

• 本文使用了 Laravel 的默认分页逻辑，具体情况请根据实际项目需求进行调整。

来源：51cto网技术博文

本文内容已进行优化处理，建议在发布前建议参考原文章获取最新更新信息。

转载地址：http://kfgyk.baihongyu.com/