MODIF pagination
This commit is contained in:
76
views/partials/pagination-custom-pages.twig
Normal file
76
views/partials/pagination-custom-pages.twig
Normal 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>
|
||||
89
views/partials/pagination-custom.twig
Normal file
89
views/partials/pagination-custom.twig
Normal 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 %}
|
||||
@ -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 %}
|
||||
|
||||
|
||||
@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user