MODIF pagination

This commit is contained in:
2025-10-03 08:08:09 +00:00
parent ba1226adb9
commit 452cf904de
4 changed files with 185 additions and 4 deletions

View File

@ -0,0 +1,76 @@
<ul class="pagination d-none d-md-flex">
{% set current_page = pagination.current %}
{% set total_pages = pagination.pages|length %}
{% set max_visible = 6 %}
{% set half_visible = (max_visible / 2)|round(0, 'floor') %}
{# Calcular el rango de páginas a mostrar #}
{% set start_page = max(1, current_page - half_visible) %}
{% set end_page = min(total_pages, start_page + max_visible - 1) %}
{# Ajustar el inicio si estamos cerca del final #}
{% if end_page - start_page < max_visible - 1 %}
{% set start_page = max(1, end_page - max_visible + 1) %}
{% endif %}
{% for page in pagination.pages %}
{% set page_number = loop.index %}
{# Mostrar siempre la primera página #}
{% if page_number == 1 %}
{% if page.link %}
<li class="mx-2 btn-pagination-position">
<a href="{{ page.link }}" class="{{ page.class }} text-decoration-none btn-page-hover">
{{ page.title }}
</a>
</li>
{% else %}
<li class="current mx-2 btn-pagination-position">
<span class="{{ page.class }}">{{ page.title }}</span>
</li>
{% endif %}
{# Añadir puntos suspensivos si es necesario #}
{% if start_page > 2 %}
<li class="mx-2 btn-pagination-position">
<span class="pagination-dots">...</span>
</li>
{% endif %}
{# Mostrar páginas en el rango #}
{% elseif page_number >= start_page and page_number <= end_page and page_number != 1 and page_number != total_pages %}
{% if page.link %}
<li class="mx-2 btn-pagination-position">
<a href="{{ page.link }}" class="{{ page.class }} text-decoration-none btn-page-hover">
{{ page.title }}
</a>
</li>
{% else %}
<li class="current mx-2 btn-pagination-position">
<span class="{{ page.class }}">{{ page.title }}</span>
</li>
{% endif %}
{# Mostrar siempre la última página #}
{% elseif page_number == total_pages %}
{# Añadir puntos suspensivos si es necesario #}
{% if end_page < total_pages - 1 %}
<li class="mx-2 btn-pagination-position">
<span class="pagination-dots">...</span>
</li>
{% endif %}
{% if page.link %}
<li class="mx-2 btn-pagination-position">
<a href="{{ page.link }}" class="{{ page.class }} text-decoration-none btn-page-hover">
{{ page.title }}
</a>
</li>
{% else %}
<li class="current mx-2 btn-pagination-position">
<span class="{{ page.class }}">{{ page.title }}</span>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>

View File

@ -0,0 +1,89 @@
{% if pagination and pagination.total > 1 %}
<nav class="pagination-block d-flex justify-content-center">
<ul class="pagination">
{# First #}
{% if (pagination.pages|first) and pagination.pages|first.current != true %}
<li class="first mx-2 border border-0">
<a href="{{ pagination.pages|first.link }}"
class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">
{{ __('Inicio', 'Sindikatua') }}
</a>
</li>
{% else %}
<li class="first disabled mx-2 border border-0" >
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">
{{ __('Inicio', 'Sindikatua') }}
</button>
</li>
{% endif %}
{# Previous #}
{% if pagination.prev %}
<li class="prev mx-2 border border-0">
<a href="{{ pagination.prev.link }}"
class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">
{{ __('Anterior', 'Sindikatua') }}
</a>
</li>
{% else %}
<li class="prev disabled mx-2 border border-0">
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">
{{ __('Anterior', 'Sindikatua') }}
</button>
</li>
{% endif %}
{# Pages #}
{# {% for page in pagination.pages %}
{% if page.link %}
<li class="mx-2 btn-pagination-position">
<a href="{{ page.link }}"
class="{{ page.class }} text-decoration-none btn-page-hover" >
{{ page.title }}
</a>
</li>
{% else %}
<li class="current mx-2 btn-pagination-position">
<span class="{{ page.class }}">{{ page.title }}</span>
</li>
{% endif %}
{% endfor %} #}
{% include 'partials/pagination-custom-pages.twig' %}
{# Next #}
{% if pagination.next %}
<li class="next mx-2 border border-0">
<a href="{{ pagination.next.link }}"
class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">
{{ __('Siguiente', 'Sindikatua') }}
</a>
</li>
{% else %}
<li class="next disabled mx-2 border border-0">
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">
{{ __('Siguiente', 'Sindikatua') }}
</button>
</li>
{% endif %}
{# Last #}
{% if (pagination.pages|last) and pagination.pages|last.current != true %}
<li class="last mx-2 border border-0">
<a href="{{ pagination.pages|last.link }}"
class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">
{{ __('Última', 'Sindikatua') }}
</a>
</li>
{% else %}
<li class="last disabled mx-2 border border-0">
<button disabled
class="btn-secondary-cnt btn-pagination-position btn-no-hover">
{{ __('Última', 'Sindikatua') }}
</button>
</li>
{% endif %}
</ul>
</nav>
{% endif %}

View File

@ -15,11 +15,16 @@
{# Previous #}
{% if posts.pagination.prev %}
<li class="prev mx-2 border border-0">
<a href="{{ posts.pagination.prev.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Anterior</a>
<a href="{{ posts.pagination.prev.link }}"
class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">
{{ __('Anterior', 'Sindikatua') }}
</a>
</li>
{% else %}
<li class="prev disabled mx-2 border border-0">
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Anterior</button>
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">
{{ __('Anterior', 'Sindikatua') }}
</button>
</li>
{% endif %}
@ -39,11 +44,16 @@
{# Next #}
{% if posts.pagination.next %}
<li class="next mx-2 border border-0">
<a href="{{ posts.pagination.next.link }}" class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">Siguiente</a>
<a href="{{ posts.pagination.next.link }}"
class="text-decoration-none btn-primary-cnt btn-pagination-position btn-page-hover">
{{ __('Siguiente', 'Sindikatua') }}
</a>
</li>
{% else %}
<li class="next disabled mx-2 border border-0">
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">Siguiente</button>
<button disabled class="btn-secondary-cnt btn-pagination-position btn-no-hover">
{{ __('Siguiente', 'Sindikatua') }}
</button>
</li>
{% endif %}

View File

@ -46,6 +46,12 @@
{% else %}
<h2>no hay artículos</h2>
{% endif %}
<!-- PAGINATION -->
<div class="pagination-custom mt-5">
{% include 'partials/pagination-custom.twig' %}
</div>
</section>
{% endblock %}