skip to Main Content

How to reduce the number of visible buttons during pagination in Laravel. I have tried many methods but none of them work correctly

The $onEachSide=1 method does not work as it should

This is what the pagination looks like now

enter image description here

And that’s what I need

enter image description here

Here is the pagination code

@if ($paginator->hasPages())
    <nav>
        <ul class="pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->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="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</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 class="page-link">{{ $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"><span class="page-link">{{ $page }}</span></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')">&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

2

Answers


  1. Chosen as BEST ANSWER

    This is the only way I achieved what I wanted. It is not perfect, but it will cope with its task perfectly

    @if ($paginator->hasPages())
    {{--    Custom default component--}}
        <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-center">
            <span class="relative z-0 inline-flex shadow-sm rounded-md">
                {{-- Previous Page Link --}}
                @if ($paginator->onFirstPage())
                    <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
                        <span class="relative inline-flex items-center px-1 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                            </svg>
                        </span>
                    </span>
                @else
                    <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-1 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                @endif
    
                {{-- Pagination Elements --}}
                @if($paginator->currentPage() > 2)
                    <a href="{{ $paginator->url(1) }}" class="relative inline-flex items-center px-3 py-2 -ml-px text-sm font-medium text-success bg-white border border-gray-300 leading-5 hover:text-black hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => 1]) }}">
                        1
                    </a>
                @endif
                @if($paginator->currentPage() > 3)
                    {{-- "Three Dots" Separator --}}
                    <span aria-disabled="true">
                        <span class="relative inline-flex items-center p-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">...</span>
                    </span>
                @endif
                @foreach(range(1, $paginator->lastPage()) as $i)
                    @if($i >= $paginator->currentPage() - 1 && $i <= $paginator->currentPage() + 1)
                        @if ($i == $paginator->currentPage())
                            <span aria-current="page">
                                <span class="relative inline-flex items-center px-3 py-2 -ml-px text-sm font-medium badge-success border border-gray-300 cursor-default leading-5">{{ $i }}</span>
                            </span>
                        @else
                            <a href="{{ $paginator->url($i) }}" class="relative inline-flex items-center px-3 py-2 -ml-px text-sm font-medium text-success bg-white border border-gray-300 leading-5 hover:text-black hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $i]) }}">
                                {{ $i }}
                            </a>
                        @endif
                    @endif
                @endforeach
                @if($paginator->currentPage() < $paginator->lastPage() - 2)
                    {{-- "Three Dots" Separator --}}
                    <span aria-disabled="true">
                        <span class="relative inline-flex items-center p-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">...</span>
                    </span>
                @endif
                @if($paginator->currentPage() < $paginator->lastPage() - 1)
                    <a href="{{ $paginator->url($paginator->lastPage()) }}" class="relative inline-flex items-center px-3 py-2 -ml-px text-sm font-medium text-success bg-white border border-gray-300 leading-5 hover:text-black hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $paginator->lastPage()]) }}">
                        {{ $paginator->lastPage() }}
                    </a>
                @endif
    
                {{-- Next Page Link --}}
                @if ($paginator->hasMorePages())
                    <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-1 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                @else
                    <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
                        <span class="relative inline-flex items-center px-1 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                            </svg>
                        </span>
                    </span>
                @endif
            </span>
        </nav>
    @endif
    

  2. Here’s my pagination function I wrote from scratch to achieve this compact mode. You may adapt the logic into your template format. I provide it as-is hope it helps.

    public static function draw_pagination_as_html_compact($total, $page, $page_size, $prefix = "crud/list/table-name/", $suffix = "/&q=that", $before_non_one = "")
    {
        if ($total <= $page_size) {
            return "";
    
        }
    
        $pages = ceil($total / $page_size);
        $output = [];
    
        $page = min($pages, $page);
        $page = max(1, $page);
    
        // previous
        if ($page > 1) {
            $output[] = '<li><a href="?path=' . ($prefix) . (intval($page - 1) > 1 ? ($before_non_one . intval($page - 1) . '') : '') . ($suffix) . '" data-hijack="click">«</a></li>';
        } else {
            $output[] = '<li class="disabled"><a>«</a></li>';
        }
    
        // page links
        $did_first_ellipsis = false;
        $did_last_ellipsis = false;
        for ($i = 1; $i <= $pages; $i++) {
            $active = ($i == $page) ? ' class="active"' : "";
    
            if ($pages <= 7) {
    
                // normal
                $output[] = '<li' . $active . '><a href="?path=' . ($prefix) . (intval($i) > 1 ? ($before_non_one . intval($i)) . '' : '') . ($suffix) . '" data-hijack="click">' . $i . '</a></li>';
            } else {
                if ($page <= 4) {
    
                    // start
                    if ($i <= 5 || $i == $pages) {
                        $output[] = '<li' . $active . '><a href="?path=' . ($prefix) . (intval($i) > 1 ? ($before_non_one . intval($i)) . '' : '') . ($suffix) . '" data-hijack="click">' . $i . '</a></li>';
                    } else {
                        if (!$did_first_ellipsis) {
                            $output[] = '<li class="disabled"><a>...</a></li>';
                        }
                        $did_first_ellipsis = true;
                    }
                } else if ($page >= $pages - 3) {
    
                    // end
                    if ($i == 1 || $i >= $pages - 4) {
                        $output[] = '<li' . $active . '><a href="?path=' . ($prefix) . (intval($i) > 1 ? ($before_non_one . intval($i)) . '' : '') . ($suffix) . '" data-hijack="click">' . $i . '</a></li>';
                    } else {
                        if (!$did_last_ellipsis) {
                            $output[] = '<li class="disabled"><a>...</a></li>';
                        }
                        $did_last_ellipsis = true;
                    }
                } else {
    
                    // middle
                    if ($i == 1 || $i == $pages || abs($i - $page) <= 1) {
                        $output[] = '<li' . $active . '><a href="?path=' . ($prefix) . (intval($i) > 1 ? ($before_non_one . intval($i)) . '' : '') . ($suffix) . '" data-hijack="click">' . $i . '</a></li>';
                    } else {
                        if ($i < $page) {
                            if (!$did_first_ellipsis) {
                                $output[] = '<li class="disabled"><a>...</a></li>';
                            }
                            $did_first_ellipsis = true;
                        } else {
                            if (!$did_last_ellipsis) {
                                $output[] = '<li class="disabled"><a>...</a></li>';
                            }
                            $did_last_ellipsis = true;
                        }
                    }
                }
    
            }
    
    
        }
    
        // next
        if ($page < $pages) {
            $output[] = '<li><a href="?path=' . ($prefix . $before_non_one) . (intval($page) + 1) . ($suffix) . '" data-hijack="click">»</a></li>';
        } else {
            $output[] = '<li class="disabled"><a>»</a></li>';
        }
    
        $pages = implode("nt", $output);
    
        $html = Project::get_template("tables/table-pagination.html", [
            '$pages' => $pages,
        ]);
        return $html;
    }
    

    Here are some HTML outputs

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    
    <div class="pagination-container">
      <ul class="pagination">
        <li><a href="?path=entries/proxies/3" data-hijack="click" class="already-hijacked">«</a></li>
        <li><a href="?path=entries/proxies" data-hijack="click" class="already-hijacked">1</a></li>
        <li><a href="?path=entries/proxies/2" data-hijack="click" class="already-hijacked">2</a></li>
        <li><a href="?path=entries/proxies/3" data-hijack="click" class="already-hijacked">3</a></li>
        <li class="active"><a href="?path=entries/proxies/4" data-hijack="click" class="already-hijacked">4</a></li>
        <li><a href="?path=entries/proxies/5" data-hijack="click" class="already-hijacked">5</a></li>
        <li><a class="disabled">...</a></li>
        <li><a href="?path=entries/proxies/9" data-hijack="click" class="already-hijacked">9</a></li>
        <li><a href="?path=entries/proxies/5" data-hijack="click" class="already-hijacked">»</a></li>
      </ul>
    </div>
    
    
    <div class="pagination-container">
      <ul class="pagination">
        <li><a href="?path=entries/proxies/4" data-hijack="click" class="already-hijacked">«</a></li>
        <li><a href="?path=entries/proxies" data-hijack="click" class="already-hijacked">1</a></li>
        <li><a class="disabled">...</a></li>
        <li><a href="?path=entries/proxies/4" data-hijack="click" class="already-hijacked">4</a></li>
        <li class="active"><a href="?path=entries/proxies/5" data-hijack="click" class="already-hijacked">5</a></li>
        <li><a href="?path=entries/proxies/6" data-hijack="click" class="already-hijacked">6</a></li>
        <li><a class="disabled">...</a></li>
        <li><a href="?path=entries/proxies/9" data-hijack="click" class="already-hijacked">9</a></li>
        <li><a href="?path=entries/proxies/6" data-hijack="click" class="already-hijacked">»</a></li>
      </ul>
    </div>
    
    <div class="pagination-container">
      <ul class="pagination">
        <li><a href="?path=entries/proxies/5" data-hijack="click" class="already-hijacked">«</a></li>
        <li><a href="?path=entries/proxies" data-hijack="click" class="already-hijacked">1</a></li>
        <li><a class="disabled">...</a></li>
        <li><a href="?path=entries/proxies/5" data-hijack="click" class="already-hijacked">5</a></li>
        <li class="active"><a href="?path=entries/proxies/6" data-hijack="click" class="already-hijacked">6</a></li>
        <li><a href="?path=entries/proxies/7" data-hijack="click" class="already-hijacked">7</a></li>
        <li><a href="?path=entries/proxies/8" data-hijack="click" class="already-hijacked">8</a></li>
        <li><a href="?path=entries/proxies/9" data-hijack="click" class="already-hijacked">9</a></li>
        <li><a href="?path=entries/proxies/7" data-hijack="click" class="already-hijacked">»</a></li>
      </ul>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search