Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example of pagination with Twig
{#
Parameters:
* nbPages (int): number of pages
* currentPage (int): current pages
* url (string): route name & query (string): route parameter
ex: list/page-5?q=myFilter (5 = page and query = myFilter)
#}
{% spaceless %}
{% if nbPages > 1 %}
{# Number of page around current page+1 #}
{% set nearbyPagesLimit = 4 %}
<div>
<ul class="pagination">
{% if currentPage != 1 %}
<li>
<a href="{{ path(url, { 'page': 1, 'q': query }) }}">First</a>
</li>
{% endif %}
{% for i in 1..nbPages %}
{% if 0 == (currentPage - nearbyPagesLimit) - loop.index %} {# dot before #}
<li class="disabled"><a href="#">...</a></li>
{% elseif 0 == (currentPage + nearbyPagesLimit) - loop.index %} {# dot after #}
<li class="disabled"><a href="#">...</a></li>
{% elseif 0 < (currentPage - nearbyPagesLimit) - loop.index %} {# hide all before #}
{% elseif 0 > (currentPage + nearbyPagesLimit) - loop.index %} {# hide all after #}
{% else %}
<li {% if currentPage == loop.index %} class="active"{% endif %}>
<a href="{{ path(url, { 'page': loop.index, 'q': query }) }}">{{ loop.index }}</a>
</li>
{% endif %}
{% endfor %}
{% if currentPage != nbPages %}
<li>
<a href="{{ path(url, { 'page': nbPages, 'q': query }) }}">Last</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
{% endspaceless %}
@cadot-info
Copy link

thanks, for your share ;-)

@cadot-eu
Copy link

cadot-eu commented Apr 20, 2022

Pagination with a variable.

	<nav aria-label="Page navigation example">
		<ul
			class="pagination justify-content-center">
			{# precedent #}
			<li class="page-item {{ app.request.query.get('page')==1 or app.request.query.get('page')==0 ? 'disabled' }} ">
				{% if app.request.query.get('page') is defined and app.request.query.get('page')>1 %}
					{% set precedent = app.request.query.get('page') -1 %}
				{% else %}
					{% set precedent = 1 %}
				{% endif %}
				<a class="page-link" href="{{ path('¤entity¤_index',{'page':precedent,'tri':app.request.query.get('tri'),'ordre':app.request.query.get('ordre')}) }}">
					<span aria-hidden="true">&laquo;</span>
				</a>
			</li>
			{% if pagesMaxi/10>6 %}
				{# 1 #}
				<li class="page-item">
					<a class="page-link" href="{{ path('¤entity¤_index',{'page':1,'tri':app.request.query.get('tri'),'ordre':app.request.query.get('ordre')}) }}">1</a>
				</li>
				{# pages millieu #}
				{% for item in 1..5 %}
					<li class="page-item">
						<a class="page-link " href="{{ path('¤entity¤_index',{'page':(pagesMaxi/10/6*loop.index)|number_format(0),'tri':app.request.query.get('tri'),'ordre':app.request.query.get('ordre')}) }}">{{(pagesMaxi/10/6*loop.index)|number_format(0)}}</a>
					</li>
				{% endfor %}
				{# maxi #}
				<li class="page-item">
					<a class="page-link" href={{ path('¤entity¤_index',{'page':(pagesMaxi/10)|number_format(0),'tri':app.request.query.get('tri'),'ordre':app.request.query.get('ordre')} ) }}>{{(pagesMaxi/10)|number_format(0)}}</a>
				</li>
			{% else %}
				{% for item in 1..(pagesMaxi/10)|number_format(0) %}
					<li class="page-item">
						<a class="page-link " href="{{ path('¤entity¤_index',{'page':loop.index,'tri':app.request.query.get('tri'),'ordre':app.request.query.get('ordre')}) }}">{{loop.index}}</a>
					</li>
				{% endfor %}
			{% endif %}
			{# suivant #}
			<li class="page-item {{ app.request.query.get('page') >= (pagesMaxi/10)|number_format ? 'disabled' }}">
				{% if app.request.query.get('page')==0 %}
					{% set suivant = 2 %}
				{% else %}
					{% set suivant = app.request.query.get('page') +1 %}
				{% endif %}
				<a class="page-link" href="{{ path('¤entity¤_index',{'page':suivant,'tri':app.request.query.get('tri'),'ordre':app.request.query.get('ordre')}) }}">
					<span aria-hidden="true">&raquo;</span>
				</a>
			</li>
		</ul>
	</nav>

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