Template Basic and Custom Pagination on Laravel

ตัวอย่าง Pagination แบบ Basic ที่ใช้กันทั่วไป ร่วมกับ CSS Framework อย่าง Bootstrap, Tailwind กับแบบที่ต้อง Custom เอง

🐤 Basic

PaginationController.php

public function index()
{
   $posts = Post::paginate(10);
   return view('posts.index', ['posts' => $posts]);
}

pagination.blade.php

@foreach ($posts as $post)
    <div class="post">
        <h2>{{ $post->title }}</h2>
        <p>{{ $post->content }}</p>
    </div>
@endforeach

{{ $posts->links() }}

🦁 Custom

PaginationController.php

public function index()
{
    $perPage = 3;
    $obj = Project::where('status', '!=', null)->paginate($perPage);
    $totalPages = ceil($obj->total() / $perPage);
    return view('admin.project.index', compact('obj', 'totalPages'));
}

pagination.blade.php

@if ($obj->hasPages())
<nav>
    <ul class="pagination justify-content-center">
        {{-- Previous Page Link --}}
        @if ($obj->onFirstPage())
            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
                <span class="page-link" aria-hidden="true">&lsaquo;</span>
            </li>
        @else
            <li class="page-item">
                <a class="page-link" href="{{ $obj->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
            </li>
        @endif

        {{-- Pagination Elements --}}
        @for ($i = 1; $i <= $totalPages; $i++)
            <li class="page-item"><a class="page-link" href="{{ url('admin/project?page=' . $i) }}">{{ $i }}</a></li>
        @endfor

        {{-- Next Page Link --}}
        @if ($obj->hasMorePages())
            <li class="page-item">
                <a class="page-link" href="{{ $obj->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
            </li>
        @else
            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
                <span class="page-link" aria-hidden="true">&rsaquo;</span>
            </li>
        @endif
    </ul>
</nav>
@endif