laravel에서 사용자 정의 스타일 페이징 기능을 구현하는 방법

Laravel 프레임워크의 지속적인 개발로 인해 점점 더 많은 웹 프로젝트가 Laravel을 선택하여 자신의 웹사이트를 개발하고 있습니다. 일상적인 개발에서 기능 구현을 위한 일반적인 접근 방식은 먼저 오픈 소스 라이브러리를 찾거나 직접 구성 요소를 작성하는 것입니다. 이 기사에서는 그 중 하나를 설명합니다. 이를 사용하세요. Laravel에는 사용자 정의 스타일 페이징을 구현하기 위한 자체 페이징 클래스가 제공됩니다.

Laravel만의 페이징 클래스

Laravel 프레임워크에는 페이징 라이브러리가 포함되어 있어 사용이 매우 편리합니다. 컨트롤러에서는 일반적으로 paginate() 메서드를 사용하여 데이터를 쿼리하고 페이지 매김 결과를 반환하는 반면, 블레이드 템플릿에서는 links() 메서드를 직접 사용하여 렌더링할 수 있습니다. 페이지 매김 링크. 아래 코드를 살펴보세요. paginate() 方法来查询数据并返回分页结果，而在 Blade 模板中我们可以直接使用 links() 方法来渲染分页链接，看下面的代码：

// 在控制器中查询数据并返回分页结果
$data = DB::table('table_name')->paginate(15);

// 在 Blade 模板中通过 links() 方法渲染分页链接
{{ $data->links() }}

这样代码就完成了分页查询的工作，并且将分页链接渲染到了页面上。但是这样的链接样式是默认的，如果想要更改样式，我们需要自定义视图。

自定义视图

我们先来了解下 links() 方法，我们可以在 Blade 模板中输出一下 {{ $data->links() }} 的值，得到的结果是这样的：

<ul class="pagination">
    <li class="page-item disabled" aria-disabled="true" aria-label="&laquo; Previous">
        <span class="page-link" aria-hidden="true">&lsaquo;</span>
    </li>
    <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=2">2</a></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=3">3</a></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=4">4</a></li>
    <li class="page-item"><a class="page-link" href="http://localhost?page=5">5</a></li>
    <li class="page-item">
        <a class="page-link" href="http://localhost?page=2" rel="next" aria-label="Next &raquo;">&rsaquo;</a>
    </li>
</ul>

我们发现，links() 方法默认渲染的分页链接是一个无序列表，每一项都是一个独立的 li 元素，其中 active 类表示当前页码，disabled 类表示不可用的页码。如果我们想要自定义分页链接的样式，就需要在视图文件中覆盖 Laravel 默认的链接渲染。

在 Laravel 中，可以使用 php artisan make:view 命令来生成视图文件，如下：

php artisan make:view pagination

这个命令将在 resources/views 目录下创建一个名为 pagination.blade.php 的文件。在该文件中写入如下代码：

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang(&#39;pagination.previous&#39;)">
                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</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" aria-label="@lang('pagination.next')">&rsaquo;</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang(&#39;pagination.next&#39;)">
                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

这段代码是 Laravel 默认的分页视图代码，我们可以将其拷贝到 pagination.blade.php

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    @if ($paginator->onFirstPage())
        <li class="page-item disabled"><span class="page-link">上一页</span></li>
    @else
        <li class="page-item"><a class="page-link" href="{{ $paginator->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" href="{{ $paginator->nextPageUrl() }}">下一页</a></li>
    @else
        <li class="page-item disabled"><span class="page-link">下一页</span></li>
    @endif
  </ul>
</nav>

이러한 방식으로 코드는 페이징 쿼리를 완료하고 페이지에 대한 페이징 링크를 렌더링합니다. 하지만 이 링크 스타일이 기본값입니다. 스타일을 변경하려면 보기를 사용자 정의해야 합니다.

사용자 정의 보기

먼저 links() 메서드를 이해해 보겠습니다. 이를 블레이드 템플릿 {{ $data->links() }} 값으로 출력할 수 있습니다.

rrreee

기본적으로 links() 메소드에 의해 렌더링된 페이징 링크는 순서가 없는 목록이고 각 항목은 독립적인 li임을 확인했습니다. > 요소에서 active 클래스는 현재 페이지 번호를 나타내고 disabled 클래스는 사용할 수 없는 페이지 번호를 나타냅니다. 페이지 매기기 링크 스타일을 사용자 정의하려면 뷰 파일에서 Laravel의 기본 링크 렌더링을 재정의해야 합니다.

Laravel에서는 다음과 같이 php artisan make:view 명령을 사용하여 뷰 파일을 생성할 수 있습니다.

rrreee

이 명령은 resources/views에 이름을 생성합니다. code> 디렉토리 파일은 pagination.blade.php입니다. 이 파일에 다음 코드를 작성하세요:

rrreee

이 코드는 라라벨의 기본 페이지네이션 뷰 코드입니다. pagination.blade.php 파일에 복사한 후 수정하세요. 🎜🎜사용자 정의 스타일🎜🎜사용자 정의 스타일은 개발자의 선호도에 따라 다릅니다. 예를 들어 페이징 링크를 버튼 스타일로 수정할 수 있습니다. 🎜rrreee🎜일반적으로 페이징 링크가 너무 많지 않고 다양한 페이지의 페이징 링크 스타일이 있기 때문입니다. 다를 수 있으므로 여기서는 간단한 수정 방법만 제공하며 개발자는 자신의 필요에 따라 유연하게 조정할 수 있습니다. 🎜🎜요약🎜🎜 이번 글의 소개를 통해 Laravel 프레임워크에 포함된 페이징 클래스가 어떻게 구현되는지, 커스텀 뷰를 통해 페이징 링크의 스타일을 수정하는 방법을 알아보았습니다. 물론 이 사용자 정의는 페이지 매김 스타일에만 국한되지 않고 개발자는 이를 다양한 다른 레이아웃 스타일에도 적용할 수 있습니다. 🎜🎜실제 개발에서 우수한 개발자는 항상 프레임워크의 잠재력을 발견하고 자신의 필요에 따라 최적화할 수 있습니다. 이는 우수한 개발자가 되기 위해 반드시 숙달해야 할 기술 중 하나입니다. 이 글이 모든 분들에게 도움이 되기를 바라며, 또한 모든 분들이 라라벨 프레임워크를 더 깊이 이해하고 적용할 수 있기를 바랍니다. 🎜

위 내용은 laravel에서 사용자 정의 스타일 페이징 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!