laravel怎麼實現自訂樣式的分頁功能

隨著 Laravel 框架的不斷發展，現在越來越多的 Web 專案都選擇了它，當然也有很多開發者選擇使用 Laravel 開發自己的網站。在日常開發中，對於實現功能的實現，通常的做法是先尋找開源的庫或自己寫組件，互聯網上有很多前人的經驗與總結，本篇文章就是其中之一，它會告訴你如何使用Laravel 自帶的分頁類別來實現自訂樣式的分頁。

Laravel 自帶的分頁類別

Laravel 框架自帶了分頁庫，使用起來非常方便。在控制器中我們一般使用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>

由於分頁連結通常不會太多，而且不同頁面的分頁連結樣式也可能不同，因此我們這裡只提供了一種簡單的修改方式，開發者可以根據自己的需求靈活調整。

總結

透過本文的介紹，我們了解到了 Laravel 框架自帶的分頁類別是如何實現的，以及如何透過自訂視圖來修改分頁連結的樣式。當然，這種自訂方式不僅限於分頁樣式，開發者也可以將它套用到其他各種佈局樣式中。

在實際開發中，優秀的開發者總是能夠發現框架的潛力並且按照自己的需求進行最佳化，這就是成為一個優秀開發者所必須掌握的技術之一。希望本文能對大家有幫助，也希望大家能夠對 Laravel 框架有更深入的了解與應用。

以上是laravel怎麼實現自訂樣式的分頁功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！