自定义分页，增加输入页码跳转

淡淡的烟草味﹌ 2021-10-01 09:46 248阅读 0赞

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

> resources/views/vendor/pagination/default.blade.php

@if ($paginator->hasPages())
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="disabled"><span>«</span></li>
            @else
                <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">«</a></li>
            @endif
    
            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <li class="disabled"><span>{{ $element }}</span></li>
                @endif
    
                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li class="active"><span>{{ $page }}</span></li>
                        @else
                            <li><a href="{{ $url }}">{{ $page }}</a></li>
                        @endif
                    @endforeach
                @endif
            @endforeach
    
            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">»</a></li>
            @else
                <li class="disabled"><span>»</span></li>
            @endif
        </ul>
        <div class="pull-right ml-10">
            <span>第 </span>
            <input type="number" id="pageNum" data-url="{{$paginator->url(1)}}" data-total="{{ $paginator->lastPage() }}" value="{{ $paginator->currentPage() }}" class="form-control inline-block" style="width: 60px; padding: 0px 10px;">
            <span> 页</span>
            <button class="btn btn-primary" onclick="goToPage()">跳转</button>
        </div>
        <script>
            function goToPage() {
                var page = $('#pageNum').val();
                var total = $('#pageNum').data('total');
                var url = $('#pageNum').data('url');
                url = url.substring(0, url.length-1);
    
                if (page < 1) {
                    page = 1;
                }
                if (page > total) {
                    page = total;
                }
                window.location.href = url + page;
            }
        </script>
    @endif