隨著 Laravel 框架的不斷發(fā)展，現(xiàn)在越來越多的 Web 專案都選擇了它，當(dāng)然也有很多開發(fā)者選擇使用 Laravel 開發(fā)自己的網(wǎng)站。在日常開發(fā)中，對(duì)於實(shí)現(xiàn)功能的實(shí)現(xiàn)，通常的做法是先尋找開源的庫或自己寫組件，互聯(lián)網(wǎng)上有很多前人的經(jīng)驗(yàn)與總結(jié)，本篇文章就是其中之一，它會(huì)告訴你如何使用Laravel 自帶的分頁類別來實(shí)現(xiàn)自訂樣式的分頁。

Laravel 自帶的分頁類別

Laravel 框架自帶了分頁庫，使用起來非常方便。在控制器中我們一般使用paginate() 方法來查詢資料並返回分頁結(jié)果，而在Blade 模板中我們可以直接使用links() 方法來渲染分頁鏈接，看下面的程式碼：

//?在控制器中查詢數(shù)據(jù)并返回分頁結(jié)果
$data?=?DB::table('table_name')->paginate(15);

//?在?Blade?模板中通過?links()?方法渲染分頁鏈接
{{?$data->links()?}}

這樣程式碼就完成了分頁查詢的工作，並且將分頁連結(jié)渲染到了頁面上。但是這樣的連結(jié)樣式是預(yù)設(shè)的，如果想要更改樣式，我們需要自訂視圖。

自訂視圖

我們先來了解下links() 方法，我們可以在Blade 範(fàn)本中輸出一下{{ $data->links () }} 的值，得到的結(jié)果是這樣的：

<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>

我們發(fā)現(xiàn)，links() 方法預(yù)設(shè)渲染的分頁連結(jié)是一個(gè)無序列表，每一項(xiàng)目都是一個(gè)獨(dú)立的li 元素，其中active 類別表示目前頁碼，disabled 類別表示不可用的頁碼。如果我們想要自訂分頁連結(jié)的樣式，就需要在視圖檔案中覆寫 Laravel 預(yù)設(shè)的連結(jié)渲染。

在Laravel 中，可以使用php artisan make:view 指令來產(chǎn)生視圖文件，如下：

php?artisan?make:view?pagination

這個(gè)指令將在resources/views 目錄下建立一個(gè)名為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 預(yù)設(shè)的分頁視圖程式碼，我們可以將其拷貝到pagination.blade.php 檔案中，然後對(duì)其進(jìn)行自訂修改。

自訂樣式

自訂樣式就看開發(fā)者自己的喜好了，例如我們可以將分頁的連結(jié)修改為按鈕樣式：

<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>

由於分頁連結(jié)通常不會(huì)太多，而且不同頁面的分頁連結(jié)樣式也可能不同，因此我們這裡只提供了一種簡(jiǎn)單的修改方式，開發(fā)者可以根據(jù)自己的需求靈活調(diào)整。

總結(jié)

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

在實(shí)際開發(fā)中，優(yōu)秀的開發(fā)者總是能夠發(fā)現(xiàn)框架的潛力並且按照自己的需求進(jìn)行最佳化，這就是成為一個(gè)優(yōu)秀開發(fā)者所必須掌握的技術(shù)之一。希望本文能對(duì)大家有幫助，也希望大家能夠?qū)?Laravel 框架有更深入的了解與應(yīng)用。

以上是laravel怎麼實(shí)現(xiàn)自訂樣式的分頁功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！