Paginacion

Publicado por Osvaldo Quiñónez
hace 1 mes

Hola a todos! tengo unos archivos en donde utilizo la plantilla AdminLTE 3, y quiero utilizar la paginacion que me trae esa plantilla pero que no me aparezcan los botones de las flechas grandes de siguiente y anterior uno encima del otro, como lo podria hacer? en mi plantilla de la cual se extienden las demas utilizo este paquete de bootstrap: <link rel="stylesheet" href="/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css"> , desde ya muchas gracias por las respuestas

bootstrap tailwind

Compartir en

Respuesta de Cristian Olaz
hace 1 mes

Hola Osvaldo,

Si estás usando el paginador de Laravel entonces podés personalizar la vista para quitar esas flechas que indicas.

Primero tendrías que ejecutar este comando:

php artisan vendor:publish --tag=laravel-pagination

Con eso se van a copiar unos archivos .blade dentro de resources/views/vendor/pagination Ahí tenés distintas variaciones, por ejemplo para Bootstrap 4/5, TailwindCSS o SemanticUI.

Por defecto va a usar el archivo default.blade.php, pero esto podés cambiarlo dentro del AppServiceProvider:

<?php

namespace App\Providers;

use Illuminate\Pagination\Paginator;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        Paginator::defaultView("paginador");
        Paginator::defaultSimpleView('paginador-simple');
    }
}

Podés crear tu propia vista o modificar una de las que ya están creadas. Si por ejemplo modificas el archivo bootstrap4.blade.php vas a encontrar al principio que dice esto:

            {{-- 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

Esa parte que dice &lsaquo es el caracter < que lo está usando como una flecha para la página anterior. Así podés ajustarlo con la plantilla que estás usando.

Respecto de lo que decís de que esos botones de anterior y siguiente aparecen uno encima del otro podés copiarme el código HTML y te ayudo a ver qué puede ser

Espero te sirva! Saludos,

Respuesta de Osvaldo Quiñónez
hace 1 mes

Hola Christian, antes que nada gracias por responder, la primera parte del codigo de la plantilla de la cual extiendo los archivos index para mis vistas esta asi:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PUNTO DE VENTA | Dashboard</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

  <!-- Icono para boton de eliminar -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

  <!-- Tempusdominus Bootstrap 4 -->
  <link rel="stylesheet" href="/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

  <!-- Bootstrap 4 -->
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> -->

  <!-- JQVMap -->
  <link rel="stylesheet" href="/plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/dist/css/adminlte.min.css">

  <link rel="stylesheet" href="/dist/css/bootstrap-select.min.css">

   <!-- overlayScrollbars -->
  <link rel="stylesheet" href="/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="/plugins/daterangepicker/daterangepicker.css">
  <!-- summernote -->
  <link rel="stylesheet" href="/plugins/summernote/summernote-bs4.min.css">

 {{--  <script src="https://cdn.tailwindcss.com"></script> --}}

</head>

no se si con esto me podrias ayudar, si necesitas que te muestre otros codigos me puedes avisar, muchas gracias desde ya

Respuesta de Cristian Olaz
hace 1 mes

Hola Osvaldo,

Por lo que veo en la documentación de AdminLTE, para el paginador se usa un código como el siguiente:

<ul class="pagination">
    <li class="paginate_button page-item previous disabled">
        <a href="#" class="page-link">
            Previous
        </a>
    </li>
    <li class="paginate_button page-item active">
        <a href="#" class="page-link">
            1
        </a>
    </li>
    <li class="paginate_button page-item next">
        <a href="#" class="page-link">
            Next
        </a>
    </li>
</ul>

Entonces con lo que te comenté anteriormente sobre el componente de Laravel para la paginación, te quedaría algo similar a esto:

<ul class="pagination">
    @if ($paginator->onFirstPage())
        <li class="paginate_button page-item previous disabled">
            <a href="#" class="page-link">
                Anterior
            </a>
        </li>
    @else
        <li class="paginate_button page-item previous">
            <a href="{{ $paginator->previousPageUrl() }}" class="page-link">
                Anterior
            </a>
        </li>
    @endif

    @foreach ($elements as $element)
        @if (is_string($element))

        @endif

        @if (is_array($element))
            @foreach ($element as $page => $url)
                <li class="paginate_button page-item active">
                    <a href="{{ $url }}" class="page-link">
                        {{ $page }}
                    </a>
                </li>
            @endforeach
        @endif
    @endforeach

    @if ($paginator->hasMorePages())
        <li class="paginate_button page-item next">
            <a href="{{ $paginator->nextPageUrl() }}" class="page-link">
                Siguiente
            </a>
        </li>
    @else
        <li class="paginate_button page-item next disabled">
            <a href="#" class="page-link">
                Siguiente
            </a>
        </li>
    @endif
</ul>

Pero no estoy seguro si ese era el estilo del paginador que estabas buscando, o si pensabas usarlo de otro modo. Avisame cualquier cosa.

Espero te sirva! Saludos,