Personalización Componente “paginador-form”

🧩 Introducción #

El componente “paginador-form.php” se encarga de generar los controles de paginación (página actual, anterior, siguiente, etc.) en los listados de inmuebles u otros elementos paginados.

Utiliza un objeto $paginador que contiene toda la información necesaria para:

• Mostrar la cantidad total de páginas.
• Detectar si hay páginas anteriores o siguientes.
• Resaltar la página activa.
• Renderizar correctamente los botones de navegación.

---

👀 Vista del componente #

El componente genera una paginación como la que se ve en esta imagen:

• Página actual resaltada (color personalizado).
• Números de páginas navegables.
• Enlaces “Siguiente” y “Anterior” con íconos.

---

💻 Código del componente #

<div class="row">
<div class="col-md-12">
    <br>
    <?php if (isset($paginador)) {
        if ($paginador->getNumPages() > 1) { ?>
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-end">
                    <?php if ($paginador->getPrevUrl()): ?>
                        <li class="page-item">
                            <a href="<?php echo htmlspecialchars($paginador->getPrevUrl()) ?>" data-toggle="tooltip"
                               data-placement="top" title="<?php echo $paginador->getPreviousText() ?>" class="page-link">
                                <i class="icon icon-uniEA40"></i><?php echo $paginador->getPreviousText() ?></a></li>
                    <?php endif; ?>

                    <?php foreach ($paginador->getPages() as $page) {
                        if ($page['url']) { ?>
                            <li class="page-item <?php echo($page["isCurrent"] ? 'active' : '') ?> " <?php echo($page["isCurrent"] ? 'aria-current="page"' : '') ?>   aria-label="Pagina <?php echo $page["num"] ?>" >
                                <a class="page-link " href="<?php echo htmlspecialchars($page['url']) ?>"><?php echo $page["num"] ?></a>
                            </li>
                        <?php } else { ?>
                            <li><span class="pagination-ellipsis">&hellip;</span></li>
                        <?php }
                    } ?>

                    <?php if ($paginador->getNextUrl()): ?>
                        <li class="page-item">
                            <a href="<?php echo htmlspecialchars($paginador->getNextUrl()) ?>"
                               data-toggle="tooltip" data-placement="top" title="<?php echo $paginador->getNextText() ?>"
                               class="page-link"><?php echo $paginador->getNextText() ?><i class="icon icon-uniEA3C"></i></a></li>
                    <?php endif; ?>
                </ul>
            </nav>
        <?php }
    } ?>
</div>
</div>

---

🗂️ Ruta del componente #

Ubicación en el plugin:

inmuebles/componentes/search/paginador-form.php

Ruta para sobrescribirlo en tu tema hijo:

visualinmueble/
├── templates/
│   └── inmuebles/
│       └── componentes/
│           └── search/
│               └── paginador-form.php

---

✏️ Qué se puede editar #

Lista de elementos personalizables:

1. Estilos de botones
   • Puedes modificar las clases Bootstrap (page-item, page-link) o aplicar clases personalizadas (.mi-boton) para cambiar colores, bordes, tipografía, etc.
2. Íconos de navegación
   • Actualmente se usan:
     • icon-uniEA40 para anterior
     • icon-uniEA3C para siguiente
   • Puedes cambiarlos por íconos FontAwesome, SVGs o íconos propios.
3. Texto de los botones
   • El método $paginador->getPreviousText() y getNextText() devuelve textos como “Anterior” y “Siguiente”. Puedes reemplazarlos o traducirlos directamente si quieres más control: phpCopiarEditarecho "← Anterior"; echo "Siguiente →";
4. Separador de páginas (… / elipsis)
   • Por defecto se usa: phpCopiarEditar<span class="pagination-ellipsis">&hellip;</span>
   • Puedes reemplazarlo con otro ícono o texto personalizado.
5. Posicionamiento
   • Actualmente está alineado a la derecha (justify-content-end). Puedes cambiarlo a:
     • justify-content-center
     • justify-content-start
6. Accesibilidad
   • Ya incluye atributos aria-label, aria-current y tooltip. Puedes expandir esto si necesitas mayor compatibilidad WCAG/ARIA.
7. Condiciones de visibilidad
   • Si no quieres mostrar el paginador en ciertas condiciones (como menos de 5 resultados), puedes envolverlo en un if (count($resultados) > 5).