.jpg)
隨著 laravel 框架的不斷發(fā)展，現(xiàn)在越來(lái)越多的 web 項(xiàng)目都選擇了它，當(dāng)然也有很多開(kāi)發(fā)者選擇使用 laravel 開(kāi)發(fā)自己的網(wǎng)站。在日常開(kāi)發(fā)中，對(duì)于實(shí)現(xiàn)功能的實(shí)現(xiàn)，通常的做法是先尋找開(kāi)源的庫(kù)或者自己寫(xiě)組件，互聯(lián)網(wǎng)上有很多前人的經(jīng)驗(yàn)與總結(jié)，本篇文章就是其中之一，它會(huì)告訴你如何使用 laravel 自帶的分頁(yè)類來(lái)實(shí)現(xiàn)自定義樣式的分頁(yè)。
Laravel 自帶的分頁(yè)類
Laravel 框架自帶了分頁(yè)庫(kù)，使用起來(lái)非常方便。在控制器中我們一般使用 paginate() 方法來(lái)查詢數(shù)據(jù)并返回分頁(yè)結(jié)果，而在 Blade 模板中我們可以直接使用 links() 方法來(lái)渲染分頁(yè)鏈接，看下面的代碼：
// 在控制器中查詢數(shù)據(jù)并返回分頁(yè)結(jié)果 $data = DB::table('table_name')->paginate(15); // 在 Blade 模板中通過(guò) links() 方法渲染分頁(yè)鏈接 {{ $data->links() }}
這樣代碼就完成了分頁(yè)查詢的工作，并且將分頁(yè)鏈接渲染到了頁(yè)面上。但是這樣的鏈接樣式是默認(rèn)的，如果想要更改樣式，我們需要自定義視圖。
自定義視圖
我們先來(lái)了解下 links() 方法，我們可以在 Blade 模板中輸出一下 {{ $data->links() }} 的值，得到的結(jié)果是這樣的：
<ul class="pagination"> <li class="page-item disabled" aria-disabled="true" aria-label="« Previous"> <span class="page-link" aria-hidden="true">‹</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 »">›</a> </li> </ul>
我們發(fā)現(xiàn)，links() 方法默認(rèn)渲染的分頁(yè)鏈接是一個(gè)無(wú)序列表，每一項(xiàng)都是一個(gè)獨(dú)立的 li 元素，其中 active 類表示當(dāng)前頁(yè)碼，disabled 類表示不可用的頁(yè)碼。如果我們想要自定義分頁(yè)鏈接的樣式，就需要在視圖文件中覆蓋 Laravel 默認(rèn)的鏈接渲染。
在 Laravel 中，可以使用 php artisan make:view 命令來(lái)生成視圖文件，如下：
php artisan make:view pagination
這個(gè)命令將在 Resources/views 目錄下創(chuàng)建一個(gè)名為 pagination.blade.php 的文件。在該文件中寫(xiě)入如下代碼：
@if ($paginator->hasPages()) <nav> <ul class="pagination"> {{-- Previous Page Link --}} @if ($paginator->onFirstPage()) <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <span class="page-link" aria-hidden="true">‹</span> </li> @else <li class="page-item"> <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@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" aria-label="@lang('pagination.next')">›</a> </li> @else <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <span class="page-link" aria-hidden="true">›</span> </li> @endif </ul> </nav> @endif
這段代碼是 Laravel 默認(rèn)的分頁(yè)視圖代碼，我們可以將其拷貝到 pagination.blade.php 文件中，然后對(duì)其進(jìn)行自定義修改。
自定義樣式
自定義樣式就看開(kāi)發(fā)者自己的喜好了，比如我們可以將分頁(yè)的鏈接修改為按鈕樣式：
<nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> @if ($paginator->onFirstPage()) <li class="page-item disabled"><span class="page-link">上一頁(yè)</span></li> @else <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}">上一頁(yè)</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() }}">下一頁(yè)</a></li> @else <li class="page-item disabled"><span class="page-link">下一頁(yè)</span></li> @endif </ul> </nav>
由于分頁(yè)鏈接通常不會(huì)太多，并且不同頁(yè)面的分頁(yè)鏈接樣式也可能不同，因此我們這里只提供了一種簡(jiǎn)單的修改方式，開(kāi)發(fā)者可以根據(jù)自己的需求靈活調(diào)整。
總結(jié)
通過(guò)本文的介紹，我們了解到了 Laravel 框架自帶的分頁(yè)類是如何實(shí)現(xiàn)的，以及如何通過(guò)自定義視圖來(lái)修改分頁(yè)鏈接的樣式。當(dāng)然，這種自定義方式并不僅限于分頁(yè)樣式，開(kāi)發(fā)者還可以將它應(yīng)用到其他各種布局樣式中。
在實(shí)際開(kāi)發(fā)中，優(yōu)秀的開(kāi)發(fā)者總是能夠發(fā)現(xiàn)框架的潛力并按照自己的需求進(jìn)行優(yōu)化，這就是成為一個(gè)優(yōu)秀開(kāi)發(fā)者所必須掌握的技術(shù)之一。希望本文能夠?qū)Υ蠹矣兴鶐椭蚕Ｍ蠹夷軌驅(qū)?Laravel 框架有更深入的了解和應(yīng)用。
.png)
