如何使用 bootstrap 5 在 laravel 9 中實現 onEachSide(1)？

Question

我正在嘗試在 bootstrap 5 onEachSide(1)實現到自定義分頁中，但無法理解我應該如何實現它。

下面是我的代碼參考。

DistributorController.php

public function distributorList(Request $request)
    {
        $input = $request->all();
        $search = isset($input['search']) ? $input['search'] : '';
        
        $list = $this->distributorRepository->allList($input);

        return view('admin.distributor.distributor')->with(['data'=>$list,'filter' => $search]);
    }

allList方法

public function allList($input)
    {
        
        $res = $this->makeModel();
        
        if (isset($input['search'])) {
            $search = $input['search'];

            $res = $res->where(function($query) use($search) {
                $query->where('distributorId', 'LIKE', "%{$search}%" )
                    ->orWhere ( 'name', 'LIKE', "%{$search}%" )
                    ->orWhere ( 'mobile_no', 'LIKE', "%{$search}%" )
                    ->orWhere ( 'email', 'LIKE', "%{$search}%" );
            });
        }
        
        
        
        $res = $res->paginate(1)->withQueryString();
        return $res;
    }

自定義分頁.blade.php

@if ($paginator->hasPages())


<div class="position-absolute start-0">
    <select class="select2 px-2 py-2" name="limit" id="limit">
        <option value="15">15</option>
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="500">500</option>
        <option value="all">All</option>
    </select>
</div>    
<div class="position-absolute end-0 d-flex">
    <div class="px-2 py-2">
        Showing {{ $paginator->firstItem() }}
            to {{ $paginator->lastItem() }}
            of {{ $paginator->total() }} results
    </div>
            
    
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                    <a class="page-link" href="#" tabindex="-1">Previous</a>
                </li>
            @else
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev"
                        aria-label="@lang('pagination.previous')">Previous</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>{{ $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">
                                <a class="page-link" href="{{ $url }}">{{ $page }}
                                    <span class="sr-only">(current)</span>
                                </a>
                            </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')">Next</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                    <a class="page-link" href="#">Next</a>
                </li>
            @endif
        </ul>
    </nav>
</div>
@endif

但我想要這樣：-

上一頁 1 2... 9 10 11... 19 20 下一頁

Answer 1

我是 laravel 的新用戶，但我認為你可以使用它

@if ($paginator->hasPages())
<ul class="pagination pagination">
    {{-- Previous Page Link --}}
    @if ($paginator->onFirstPage())
        <li class="disabled"><span>«</span></li>
    @else
        <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">«</a></li>
    @endif

    @if($paginator->currentPage() > 3)
        <li class="hidden-xs"><a href="{{ $paginator->url(1) }}">1</a></li>
    @endif
    @if($paginator->currentPage() > 4)
        <li><span>...</span></li>
    @endif
    @foreach(range(1, $paginator->lastPage()) as $i)
        @if($i >= $paginator->currentPage() - 1 && $i <= $paginator->currentPage() + 1)
            @if ($i == $paginator->currentPage())
                <li class="active"><span>{{ $i }}</span></li>
            @else
                <li><a href="{{ $paginator->url($i) }}">{{ $i }}</a></li>
            @endif
        @endif
    @endforeach
    @if($paginator->currentPage() < $paginator->lastPage() - 3)
        <li><span>...</span></li>
    @endif
    @if($paginator->currentPage() < $paginator->lastPage() - 2)
        <li class="hidden-xs"><a href="{{ $paginator->url($paginator->lastPage()) }}">{{ $paginator->lastPage() }}</a></li>
    @endif

    {{-- Next Page Link --}}
    @if ($paginator->hasMorePages())
        <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">»</a></li>
    @else
        <li class="disabled"><span>»</span></li>
    @endif
</ul>@endif 

Answer 2

onEachSide只是設置創建頁面時要使用的值，因此您可以在將結果傳遞給視圖之前修改該值。

$res = $res->paginate(1)->withQueryString();
$res->onEachSide(1);