搜尋

首頁  >  問答  >  主體

如何在 laravel 5 分頁中實作自訂頁碼輸入框來跳到自訂頁

如題:從資料庫取出的資料有幾百頁那麼多,然而,laravel 提供的分頁器只顯示目前頁的前後幾頁。
但當我想要跳到分頁條上沒有的頁面時,只能經過跳頁逐步達到想要的頁面。
有沒有方法實作可以在分頁條上顯示一個輸入框,使用者可以輸入自訂頁碼,然後跳到該頁瀏覽資料。

大家讲道理大家讲道理2792 天前1787

全部回覆(1)我來回復

  • 淡淡烟草味

    淡淡烟草味2017-05-16 16:50:07

    明確的告訴你是可以的,而且很簡單,有兩種方法,這兩種方法都是在views/vendor/pagination目錄下操作:

    1. 修改default.blade.php,類似程式碼如下:

    <ul class="pagination  no-margin pull-right">
        {{-- 首页 --}}
        @if ($paginator->onFirstPage())
            <li class="disabled">
                <span>首页</span>
            </li>
        @else
            <li>
                <a href="{{ $paginator->url(1) . '&limit=' . $paginator->perPage() }}">首页</a>
            </li>
        @endif
    
        {{-- 上一页 --}}
        @if ($paginator->onFirstPage())
            <li class="disabled">
                <span>上一页</span>
            </li>
        @else
            <li>
                <a href="{{ $paginator->previousPageUrl() . '&limit=' . $paginator->perPage() }}">上一页</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 . '&limit=' . $paginator->perPage() }}">{{ $page }}</a></li>
                    @endif
                @endforeach
            @endif
        @endforeach
    
        {{-- 下一页 --}}
        @if ($paginator->hasMorePages())
            <li>
                <a href="{{ $paginator->nextPageUrl() . '&limit=' . $paginator->perPage() }}">下一页</a>
            </li>
        @else
            <li class="disabled">
                <span>下一页</span>
            </li>
        @endif
    
        {{-- 尾页 --}}
        @if ($paginator->hasMorePages())
            <li>
                <a href="{{ $paginator->url($paginator->lastPage()) . '&limit=' . $paginator->perPage() }}">尾页</a>
            </li>
        @else
            <li class="disabled">
                <span>尾页</span>
            </li>
        @endif
    </ul>
    <ul class="clearfix"></ul>
    
    {{-- 增加输入框,跳转任意页码和显示任意条数 --}}
    <ul class="pagination pagination-sm no-margin no-padding pull-right">
        <li>
            <span data-toggle="tooltip" data-placement="bottom" title="输入页码,按回车快速跳转">
                第 <input type="text" class="text-center no-padding" value="{{ $paginator->currentPage() }}" id="customPage" data-total-page="{{ $paginator->lastPage() }}" style="width: 50px;"> 页 / 共 {{ $paginator->lastPage() }} 页
            </span>
        </li>
        <li>
            <span data-toggle="tooltip" data-placement="bottom" title="输入每页条数,按回车快速跳转">
                每页 <input type="text" class="text-center no-padding" value="{{ $paginator->perPage() }}" id="customLimit" data-total="{{ $paginator->total() }}" style="width: 50px;"> 条 / 共 {{ $paginator->total() }} 条
            </span>
        </li>
    </ul>
    
    1. 自訂一個分頁範本文件,如custom.blade.php,然后在其他模板中的分页方法参数中指定这个分页模板,如{!! $articles->render('vendor/pagination/custom') !!}

    回覆
    0
  • 取消回覆