Example of pagination with Twig

_pagination.html.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 %}

thanks, for your share ;-)

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>