templates/pagination.html.twig line 1

Open in your IDE?
  1. {#
  2. /**
  3.  * @file
  4.  * Bootstrap 5 Pagination with Lucide Icons
  5.  *
  6.  * View that can be used with the KnpPaginator bundle
  7.  * https://getbootstrap.com/docs/5.3/components/pagination/
  8.  *
  9.  */
  10. #}
  11. {% if pageCount > 1 %}
  12.     <nav aria-label="Page navigation">
  13.         {% set classAlign = (align is not defined) ? '' : align=='center' ? ' justify-content-center' : (align=='right' ? ' justify-content-end' : '') %}
  14.         {% set classSize = (size is not defined) ? ' pagination-sm' : size=='large' ? ' pagination-lg' : (size=='small' ? ' pagination-sm' : '') %}
  15.         <ul class="pagination{{ classAlign }}{{ classSize }} mb-0">
  16.             {# First Page #}
  17.             {% if first is defined and current > 2 %}
  18.                 <li class="page-item">
  19.                     <a href="{{ path(route, query|merge({(pageParameterName): first})) }}" class="page-link" aria-label="First" data-bs-toggle="tooltip" title="First page">
  20.                         <i data-lucide="chevrons-left" style="width: 14px; height: 14px;"></i>
  21.                     </a>
  22.                 </li>
  23.             {% endif %}
  25.             {# Previous Page #}
  26.             {% if previous is defined %}
  27.                 <li class="page-item">
  28.                     <a href="{{ path(route, query|merge({(pageParameterName): previous})) }}" class="page-link" aria-label="Previous">
  29.                         <i data-lucide="chevron-left" style="width: 14px; height: 14px;"></i>
  30.                     </a>
  31.                 </li>
  32.             {% else %}
  33.                 <li class="page-item disabled">
  34.                     <span class="page-link" aria-label="Previous">
  35.                         <i data-lucide="chevron-left" style="width: 14px; height: 14px;"></i>
  36.                     </span>
  37.                 </li>
  38.             {% endif %}
  40.             {# Page Numbers #}
  41.             {% if startPage > 1 %}
  42.                 <li class="page-item">
  43.                     <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): 1})) }}">1</a>
  44.                 </li>
  45.                 {% if startPage > 2 %}
  46.                     <li class="page-item disabled">
  47.                         <span class="page-link">…</span>
  48.                     </li>
  49.                 {% endif %}
  50.             {% endif %}
  52.             {% for page in pagesInRange %}
  53.                 {% if page != current %}
  54.                     <li class="page-item">
  55.                         <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): page})) }}">{{ page }}</a>
  56.                     </li>
  57.                 {% else %}
  58.                     <li class="page-item active" aria-current="page">
  59.                         <span class="page-link">{{ page }}</span>
  60.                     </li>
  61.                 {% endif %}
  62.             {% endfor %}
  64.             {% if endPage < pageCount %}
  65.                 {% if endPage < pageCount - 1 %}
  66.                     <li class="page-item disabled">
  67.                         <span class="page-link">…</span>
  68.                     </li>
  69.                 {% endif %}
  70.                 <li class="page-item">
  71.                     <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): pageCount})) }}">{{ pageCount }}</a>
  72.                 </li>
  73.             {% endif %}
  75.             {# Next Page #}
  76.             {% if next is defined %}
  77.                 <li class="page-item">
  78.                     <a class="page-link" rel="next" href="{{ path(route, query|merge({(pageParameterName): next})) }}" aria-label="Next">
  79.                         <i data-lucide="chevron-right" style="width: 14px; height: 14px;"></i>
  80.                     </a>
  81.                 </li>
  82.             {% else %}
  83.                 <li class="page-item disabled">
  84.                     <span class="page-link" aria-label="Next">
  85.                         <i data-lucide="chevron-right" style="width: 14px; height: 14px;"></i>
  86.                     </span>
  87.                 </li>
  88.             {% endif %}
  90.             {# Last Page #}
  91.             {% if last is defined and current < pageCount - 1 %}
  92.                 <li class="page-item">
  93.                     <a href="{{ path(route, query|merge({(pageParameterName): last})) }}" class="page-link" aria-label="Last" data-bs-toggle="tooltip" title="Last page">
  94.                         <i data-lucide="chevrons-right" style="width: 14px; height: 14px;"></i>
  95.                     </a>
  96.                 </li>
  97.             {% endif %}
  98.         </ul>
  99.     </nav>
  101.     {# Re-initialize Lucide icons for pagination #}
  102.     <script>
  103.         if (typeof lucide !== 'undefined') {
  104.             lucide.createIcons();
  105.         }
  106.     </script>
  107. {% endif %}