templates/component/pagination.html.twig line 1

Open in your IDE?
  1. {# Tablet / Desktop #}
  3. {% set pages = pagination.paginationData %}
  5. <ul class="hidden gap-2 md:flex">
  6.   {% include 'component/pagination_page.html.twig' with {
  7.     page: pages.first ?? null,
  8.     label: 'pagination.first'|trans,
  9.     disabled: pages.first is not defined
  10.   } %}
  11.   {% include 'component/pagination_page.html.twig' with {
  12.     page: pages.previous ?? null,
  13.     label: 'pagination.previous'|trans,
  14.     disabled: pages.previous is not defined
  15.   } %}
  17.   {% for page in pages.pagesInRange %}
  18.     {% include 'component/pagination_page.html.twig' with {
  19.       page: page,
  20.       label: page,
  21.       current: page == pages.current
  22.     } %}
  23.   {% endfor %}
  25.   {% include 'component/pagination_page.html.twig' with {
  26.     page: pages.next ?? null,
  27.     label: 'pagination.next'|trans,
  28.     disabled: pages.next is not defined
  29.   } %}
  31.   {% include 'component/pagination_page.html.twig' with {
  32.     page: pages.last ?? null,
  33.     label: 'pagination.last'|trans,
  34.     disabled: pages.last is not defined
  35.   } %}
  36. </ul>
  38. {# Mobile #}
  39. <form class="flex justify-end w-full" action="" method="get">
  40.   <script>
  41.     var target = new URL('{{ url(app.request.get('_route'), app.request.query.all) | raw }}');
  43.     function onSelectChange(event) {
  44.       event.preventDefault();
  45.       target.searchParams.set('page', event.target.value);
  46.       window.location.href = target;
  47.     }
  48.   </script>
  49.   <select onchange="onSelectChange(event)"
  50.     class="w-full text-center md:hidden form-control">
  51.     {% for page in 1..pages.pageCount %}
  52.       <option value="{{ page }}" {{ pages.current == page ? 'selected' }}>
  53.         {{ page }}
  54.       </option>
  55.     {% endfor %}
  56.   </select>
  57. </form>