Skip to content

Instantly share code, notes, and snippets.

@bensquire
Forked from omerucel/pagination.html.twig
Created January 27, 2017 11:10
Show Gist options
  • Save bensquire/26d58cf0953fcda91b34071932a7afbd to your computer and use it in GitHub Desktop.
Save bensquire/26d58cf0953fcda91b34071932a7afbd to your computer and use it in GitHub Desktop.
A gist for pagination in Twig, based on the total number of pages, the current page and some URL-settings.
{#
Source: http://dev.dbl-a.com/symfony-2-0/symfony2-and-twig-pagination/
Updated by: Simon Schick <simonsimcity@gmail.com>
Parameters:
* currentFilters (array) : associative array that contains the current route-arguments
* currentPage (int) : the current page you are in
* paginationPath (string) : the route name to use for links
* showAlwaysFirstAndLast (bool) : Always show first and last link (just disabled)
* lastPage (int) : represents the total number of existing pages
#}
{% spaceless %}
{% if lastPage > 1 %}
{# the number of first and last pages to be displayed #}
{% set extremePagesLimit = 3 %}
{# the number of pages that are displayed around the active page #}
{% set nearbyPagesLimit = 2 %}
<ul class="pagination">
{% if currentPage > 1 %}
<li class="page-item">
<a href="{{ paginationPath ~ '?' ~ currentFilters|merge({page: currentPage-1})|url_encode }}" class="page-link">Previous</a>
</li>
{% for i in range(1, extremePagesLimit) if ( i < currentPage - nearbyPagesLimit ) %}
<li class="page-item">
<a href="{{ paginationPath ~ '?' ~ currentFilters|merge({page: i})|url_encode }}" class="page-link">{{ i }}</a>
</li>
{% endfor %}
{% if extremePagesLimit + 1 < currentPage - nearbyPagesLimit %}
<li class="page-item disabled"><a href="#" class="page-link">...</a></li>
{% endif %}
{% for i in range(currentPage-nearbyPagesLimit, currentPage-1) if ( i > 0 ) %}
<li class="page-item">
<a href="{{ paginationPath ~ '?' ~ currentFilters|merge({page: i})|url_encode }}" class="page-link">{{ i }}</a>
</li>
{% endfor %}
{% elseif showAlwaysFirstAndLast %}
<li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
{% endif %}
<li class="page-item">
<a href="{{ paginationPath ~ '?' ~ currentFilters|merge({ page: currentPage })|url_encode }}"
class="page-link active">{{ currentPage }}</a>
</li>
{% if currentPage < lastPage %}
{% for i in range(currentPage+1, currentPage + nearbyPagesLimit) if ( i <= lastPage ) %}
<li class="page-item">
<a href="{{ paginationPath ~ '?' ~ currentFilters|merge({page: i})|url_encode }}" class="page-link">{{ i }}</a>
</li>
{% endfor %}
{% if (lastPage - extremePagesLimit) > (currentPage + nearbyPagesLimit) %}
<li class="page-item disabled"><a href="#" class="page-link">...</a></li>
{% endif %}
{% for i in range(lastPage - extremePagesLimit+1, lastPage) if ( i > currentPage + nearbyPagesLimit ) %}
<li class="page-item">
<a href="{{ paginationPath ~ '?' ~ currentFilters|merge({page: i})|url_encode }}" class="page-link">{{ i }}</a>
</li>
{% endfor %}
<li class="page-item">
<a href="{{ paginationPath ~ '?' ~ currentFilters|merge({page: currentPage+1})|url_encode }}" class="page-link">Next</a>
</li>
{% elseif showAlwaysFirstAndLast %}
<li class="page-item disabled"><a href="#" class="page-link">Next</a></li>
{% endif %}
</ul>
{% endif %}
{% endspaceless %}
@bensquire
Copy link
Author

Notes from original on usage (thank @SimonSimCity):

If you don't know how to use this - here's a short explanation:
Save the code visible here in a file. You can f.e. call it pagination.html.twig.

Now put some code like this into your template at the position, where the page-browser should appear (can as well be multiple times ... f.e. before and after your list of items):

{% include 'pagination.html.twig' with {
    currentFilters: { myFilter: filtervariables },
    currentPage: page,
    paginationPath: "myroute",
    lastPage: totalPages,
    showAlwaysFirstAndLast: true
} only %}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment