es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

October CMS limita las páginas en la paginación.

15 Jul, 2023 Programación

Me gustaría preguntar cómo puedo limitar las páginas, por ejemplo, si solo quiero mostrar 4 páginas en la paginación y luego las flechas. Actualmente muestra todas las páginas:

enter image description here

Y este es el código que estoy usando ahora:

{% if posts.lastPage > 1 %}
  <div class="pagination">
      <ul>
          {% if posts.currentPage > 1 %}
              <li><a class="pagination--left-arrow" href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}">←</a></li>
          {% endif %}

          {% for page in 1..posts.lastPage %}
              <li class="{{ posts.currentPage == page ? 'active' : null }}">
                  <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
              </li>
          {% endfor %}

          {% if posts.lastPage > posts.currentPage %}
              <li><a class="pagination--right-arrow" href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}">→</a></li>
          {% endif %}
      </ul>
  </div>
{% endif %}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para limitar el número de páginas mostradas en la paginación, puedes modificar el bucle for que genera los enlaces de página. Actualmente, recorre todas las páginas desde la página 1 hasta la última. Para limitarlo y mostrar solo un cierto número de páginas, digamos 4, puedes verificar si la diferencia entre la página actual y el índice del bucle es menor o igual a 2. Si es así, muestra el enlace, de lo contrario, omítelo y muestra una elipsis u otro indicador de que hay más páginas disponibles.

    Aquí tienes un fragmento de código actualizado que implementa esta lógica:

    {% if posts.lastPage > 1 %}
  <div class="pagination">
      <ul>
          {% if posts.currentPage > 1 %}
              <li><a class="pagination--left-arrow" href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}">←</a></li>
          {% endif %}

          {% if posts.lastPage > 4 and posts.currentPage > 3 %}
              <li><span class="pagination--ellipsis">…</span></li>
          {% endif %}

          {% for page in 1..posts.lastPage %}
              {% if page == 1 or page == posts.lastPage or (page > posts.currentPage - 2 and page < posts.currentPage + 2) %}
                  <li class="{{ posts.currentPage == page ? 'active' : null }}">
                      <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>
                  </li>
              {% endif %}
          {% endfor %}

          {% if posts.lastPage > 4 and posts.currentPage < posts.lastPage - 2 %}
              <li><span class="pagination--ellipsis">…</span></li>
          {% endif %}

          {% if posts.lastPage > 1 and posts.currentPage < posts.lastPage %}
              <li><a class="pagination--right-arrow" href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}">→</a></li>
          {% endif %}
      </ul>
  </div>
{% endif %}

    En este código actualizado, primero verificamos si hay más de 4 páginas y si la página actual es mayor que 3. Si es así, mostramos una elipsis antes de que comience el bucle. De manera similar, mostramos una elipsis al final si hay más de 4 páginas y la página actual es menor que la última página menos 2.

    Dentro del bucle, verificamos si la página es la primera o la última página o si está dentro de 2 páginas de la página actual. Si es así, mostramos el enlace, de lo contrario, lo omitimos.

    Con este código actualizado, la paginación mostrará como máximo 4 páginas a la vez, con elipsis que indican que hay más páginas disponibles.

Comments are closed.