laravel Archives - Blog de Punto y Coma Lab

Pasos para configurar el estilo del paginado, por ejemplo si se tiene la query, **se colocó paginas de 1, para poder tener varias páginas.

<?php
/**
 *
 * Created by FileGenerator Javier.
 * @author twiter @JavierTwiteando
 * User: Javier Solis Flores ( solis.unmsm@gmail.com )
 * Date: 2020-10-08
 * Time: 01:59:03
 */

namespace App\Src\Domain\ProductSearch;
...

/**
 * Class DomainProductSearchList
 * @package App\Src\Domain\Product
 * author twiter @JavierTwiteando
 */
 
class DomainProductSearchList extends BaseDomain
{
    use TraitDomainProductHomeList;
    public $filter;
    
    /**
     * @param $category_selected
     * @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
     * @throws \Exception
     */
    public function run( $category_selected)
    {
        try{
            $query = Product::query();
            $items = $query
                ...
                ->orderBy(Product::CREATED_AT)
                //->paginate(\ConstantesPaginado::BY_PAGE);
                ->paginate(1);
            ...
            return $items;
            
        }catch(\Exception $ex){
            throw $ex;
        }
    }
}

Al renderizarlo directamente, se ve así

<nav class="mb-4" aria-label="Page navigation">
                <div>
                    {{ $products->appends(['sort' => 'votes'])->links() }}
                </div>
            </nav>

Para cambiar la plantilla por defecto que usa laravel, debemos publicar una copia, con el comando

Comando > php artisan vendor:publish --tag=laravel-pagination
Resultado> Copied Directory [/vendor/laravel/framework/src/Illuminate/Pagination/resources/views] To [/resources/views/vendor/pagination]
Publishing complete.

Viendo el proyecto, se agrego la carpeta pagination

usando cada uno, los estilos resultantes son:
**tomar en cuenta que en mi página ya tengo estilos personalizados, por lo cual podrían verse diferente**

<span>pagination::default</span>
                <div class="mb-3">{{ $products->appends(['sort' => 'votes'])->links("pagination::default") }}</div>
                <span>pagination::semantic-ui</span>
                <div class="mb-3">{{ $products->appends(['sort' => 'votes'])->links("pagination::semantic-ui") }}</div>
                <span>pagination::simple-default</span>
                <div class="mb-3">{{ $products->appends(['sort' => 'votes'])->links("pagination::simple-default") }}</div>
                <span>pagination::bootstrap-4</span>
                <div class="mb-3">{{ $products->appends(['sort' => 'votes'])->links("pagination::bootstrap-4") }}</div>
                <span>pagination::simple-bootstrap-4</span>
                <div class="mb-3">{{ $products->appends(['sort' => 'votes'])->links("pagination::simple-bootstrap-4") }}</div>

En mi caso solo quiero cambiar la flecha, entonces cree un archivo nuevo my-bootstrap-4.blade.php

@if ($paginator->hasPages())
    <ul class="pagination  justify-content-center">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li class="page-item" disabled><a class="page-link" aria-label="Previous" rel="prev"><i class="ai-chevron-left"></i></a></li>
        @else
            <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" aria-label="Previous" rel="prev"><i class="ai-chevron-left"></i></a></li>
        @endif

        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li class="page-item disabled"><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"><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() }}" aria-label="Next"><i class="ai-chevron-right"></i></a></li>
        @else
            <li class="page-item disabled"><a class="page-link" aria-label="Next"><i class="ai-chevron-right"></i></a></li>
        @endif
    </ul>
@endif

resultando asi: