Laravel 使用 Livewire 3.0 元件列表中使用 Bootstrap 分頁

在 Livewire 元件內列表使用 bootstrap 分頁，當使用的預設分頁時，換頁反應為正常快速顯示，當時用自定分頁範本時卻會出現換頁反應緩慢現象，會有如此現象在於分頁的連結方式，<a>標籤連結與 wire:click連結差異。

使用 Bootstrap 分頁需要發布 Livewire livewire.php 設定檔

Livewire 預設使用框架是 Tailwind 而非 Bootstrap，使用下面指令發布 livewire.php 設定檔案：

PowerShell

php artisan livewire:publish --config

檔案會產生在 Laravel 的 config/livewrie.php，修改預設值。

PowerShell

'pagination_theme' => 'tailwind ',
//改成
'pagination_theme' => 'bootstrap',

使用預設 Bootstrap 分頁樣式

在元件中使用預設方式顯示分頁，注意圖片 HTML 分頁連結為 wire:click。

PHP

{{ $posts->links() }}

使用 Bootstrap 自訂分頁樣式

PowerShell

php artisan vendor:publish --tag=laravel-pagination

使用上指令，發布分頁範本 resources/views/vendor/pagination 資料夾內的範本包含 Tailwind 的分頁範本，在元件中顯示發布範本中的 Bootstrap 5 分頁，也可以自訂分頁範本，在指定範本檔案。

PHP

{{ $posts->links('pagination::bootstrap-5') }}

頁面功能一樣會換頁，頁面顯示反應會有點慢，可以看圖片的 HTML結構有點不太一樣，可以與上面圖片做比對就會發現，如過要自訂 Bootstrap 分頁，就必依照 Livewire 框架將 href=”” 連結方式改成 wire:click，這樣分頁才不會有延遲現象發生，這時候最快的方式就是請 AI 幫忙把程式碼轉換一下，後續再以這個範本進行自訂即可。

PHP

@if ($paginator->hasPages())
    <nav class="d-flex justify-items-center justify-content-between">
        <div class="d-flex justify-content-between flex-fill d-sm-none">
            <ul class="pagination">
                {{-- Previous Page Link --}}
                @if ($paginator->onFirstPage())
                    <li class="page-item disabled" aria-disabled="true">
                        <span class="page-link">@lang('pagination.previous')</span>
                    </li>
                @else
                    <li class="page-item">
                        <button class="page-link" wire:click="previousPage" rel="prev">@lang('pagination.previous')</button>
                    </li>
                @endif

                {{-- Next Page Link --}}
                @if ($paginator->hasMorePages())
                    <li class="page-item">
                        <button class="page-link" wire:click="nextPage" rel="next">@lang('pagination.next')</button>
                    </li>
                @else
                    <li class="page-item disabled" aria-disabled="true">
                        <span class="page-link">@lang('pagination.next')</span>
                    </li>
                @endif
            </ul>
        </div>

        <div class="d-none flex-sm-fill d-sm-flex align-items-sm-center justify-content-sm-between">
            <div>
                <p class="small text-muted">
                    {!! __('Showing') !!}
                    <span class="fw-semibold">{{ $paginator->firstItem() }}</span>
                    {!! __('to') !!}
                    <span class="fw-semibold">{{ $paginator->lastItem() }}</span>
                    {!! __('of') !!}
                    <span class="fw-semibold">{{ $paginator->total() }}</span>
                    {!! __('results') !!}
                </p>
            </div>

            <div>
                <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">
                            <button class="page-link" wire:click="previousPage" rel="prev" aria-label="@lang('pagination.previous')">‹</button>
                        </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"><button class="page-link" wire:click="gotoPage({{ $page }})">{{ $page }}</button></li>
                                @endif
                            @endforeach
                        @endif
                    @endforeach

                    {{-- Next Page Link --}}
                    @if ($paginator->hasMorePages())
                        <li class="page-item">
                            <button class="page-link" wire:click="nextPage" rel="next" aria-label="@lang('pagination.next')">›</button>
                        </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>
            </div>
        </div>
    </nav>
@endif