Laravel 5+ Bootstrap 4 分頁器

最近的project裏,發現需要修改Laravel自帶的Bootstrap 4分頁器。要使用自帶的BS4分頁,我們需要將分頁器模板導出到resources/views/vendor文件夾下:

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

完成之後,我們會發現resources/views/vendor/pagination文件夾下多出了幾個模板。Laravel 5.5版本前,默認的分頁器模板爲default.blade.php而從5.6版本開始,默認模板名稱已經調整爲bootstrap-4.blade.php 如果需要,我們也可以手動添加模板名,例如:

{{ $paginator->links('view.name') }}

Laravel文檔中沒有給出任何能夠修改所顯示的頁面數量的辦法,所以我們需要自己動手來實現:

{{-- Author: Eagle Luo --}}

@if ($paginator->hasPages())
    <ul class="pagination pagination-sm justify-content-center">
        {{-- Previous Page Link and page 1 --}}
        @if ($paginator->onFirstPage())
            <li class="page-item disabled" tabindex="-1"><span class="page-link">&laquo; 前一頁</span></li>
            <li class="page-item active"><span class="page-link">1</span></li>
        @else
            <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo; 前一頁</a></li>
            <li class="page-item"><a class="page-link" href="{{ $paginator->url(1) }}">1</a></li>
        @endif

        @php
            $halfTotal      = intval($paginator->lastPage() / 2);
            $limit          = 6;
            $halfLimit      = intval($limit / 2);
            $pageRightBound = $paginator->currentPage() + $halfLimit;
            $pageLeftBound  = $paginator->currentPage() - $halfLimit;

        @endphp

        @if ($paginator->lastPage() <= $limit)
            @for ($page = 2; $page <= $paginator->lastPage(); $page++)
                @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="{{ $paginator->url($page) }}">{{ $page }}</a></li>
                @endif
            @endfor
        @else
            {{-- When there are less than $halfLimit pages to show on left or right of the current page  --}}
            @php
                if ($pageRightBound >= $paginator->lastPage() - 1) {
                    $pageLeftBound = $paginator->lastPage() - $limit;
                    $pageRightBound = $paginator->lastPage() - 1;
                }
                if ($pageLeftBound <= 2) {
                    $pageRightBound = 1 + $limit;
                    $pageLeftBound = 2;
                }
            @endphp

            {{-- Show three dot separator on the left --}}
            @if ($pageLeftBound > 2)
                <li class="page-item disabled" tabindex="-1"><span class="page-link">...</span></li>
            @endif

            @for ($page = $pageLeftBound; $page <= $pageRightBound; $page++)
                @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="{{ $paginator->url($page) }}">{{ $page }}</a></li>
                @endif
            @endfor

            {{-- Show three dot separator on the right --}}
            @if ($pageRightBound < $paginator->lastPage() - 1)
                <li class="page-item disabled" tabindex="-1"><span class="page-link">...</span></li>
            @endif

            {{-- Display the last page --}}
            @if ($paginator->currentPage() == $paginator->lastPage())
                <li class="page-item active"><span class="page-link">{{ $paginator->lastPage() }}</span></li>
            @else
                <li class="page-item"><a class="page-link" href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li>
            @endif
        @endif


        {{-- Pagination Elements --}}

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <li class="page-item"><a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">下一頁 &raquo;</a></li>
        @else
            <li class="page-item disabled" tabindex="-1"><span class="page-link">下一頁 &raquo;</span></li>
        @endif
    </ul>
@endif

注意,我們定義了$limit這個變量爲當前頁碼之前和之後最多能顯示的頁數之和,例如當前是第7頁,那麼分頁器將顯示:
Bootstrap 4 + Laravel 5 paginator

我們可以更改$limit來達到我們需要的效果。

如果有更好的方法,歡迎指出及指正。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章