Laravel分页的样式 – Laravel 分页器

在Laravel中，分页是一个非常常见的功能，用于处理大量数据时的显示问题。默认情况下，Laravel提供的分页器样式可能并不符合所有项目的需求。介绍如何自定义Laravel分页器的样式，以满足不同的设计需求。

解决方案

Laravel提供了多种方式来自定义分页器的样式。最常见的方式是使用Bootstrap样式，或者完全自定义CSS样式。这两种方法，并提供相应的代码示例。

使用Bootstrap样式

Laravel分页器默认支持Bootstrap样式。如果你的项目已经使用了Bootstrap，那么可以直接利用这一点来美化分页器。

步骤1：确保项目中引入了Bootstrap

确保你的项目中已经引入了Bootstrap。你可以在resources/views/layouts/app.blade.php文件中添加以下代码：

html
<!-- 引入Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">


步骤2：使用Bootstrap样式的分页器

在你的视图文件中，使用links方法来生成分页链接，并指定使用Bootstrap样式：

php
{{ $items->links('pagination::bootstrap-4') }}


这里的$items是你从控制器传递过来的分页数据。

完全自定义CSS样式

如果你不希望使用Bootstrap，可以完全自定义分页器的样式。

步骤1：创建自定义分页视图

创建一个新的分页视图文件。假设我们创建一个名为custom-pagination.blade.php的文件，路径为resources/views/vendor/pagination/custom-pagination.blade.php。

php</p>

<ul class="pagination">
    @if ($paginator->onFirstPage())
        <li class="page-item disabled"><span class="page-link">上一页</span></li>
    @else
        <li class="page-item"><a class="page-link">previousPageUrl() }}">上一页</a></li>
    @endif

    @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

    @if ($paginator->hasMorePages())
        <li class="page-item"><a class="page-link">nextPageUrl() }}">下一页</a></li>
    @else
        <li class="page-item disabled"><span class="page-link">下一页</span></li>
    @endif
</ul>

<p>

步骤2：使用自定义分页视图

在你的视图文件中，使用links方法并指定自定义的分页视图：

php
{{ $items->links('vendor.pagination.custom-pagination') }}


步骤3：添加自定义CSS样式

添加自定义的CSS样式来美化分页器。你可以在resources/css/app.css文件中添加以下样式：

css
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}</p>

<p>.page-item {
    margin: 0 5px;
}</p>

<p>.page-link {
    padding: 8px 12px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #007bff;
    text-decoration: none;
    border-radius: 4px;
}</p>

<p>.page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}</p>

<p>.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
}

通过以上两种方法，你可以轻松地自定义Laravel分页器的样式。无论是使用Bootstrap还是完全自定义CSS，都能满足不同项目的设计需求。希望对你有所帮助！