Skip to content

Instantly share code, notes, and snippets.

@SimonSimCity

SimonSimCity/pagination.html.twig

Last active September 30, 2023 17:29
Show Gist options
  • Save SimonSimCity/4594748 to your computer and use it in GitHub Desktop.
Save SimonSimCity/4594748 to your computer and use it in GitHub Desktop.
Download ZIP
A gist for pagination in Twig, based on the total number of pages, the current page and some URL-settings.
Raw
pagination.html.twig
{#
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 %}
<div class="pagination">
{% if currentPage > 1 %}
<a href="{{ path(paginationPath, currentFilters|merge({page: currentPage-1})) }}">Previous</a>
{% for i in range(1, extremePagesLimit) if ( i < currentPage - nearbyPagesLimit ) %}
<a href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a>
{% endfor %}
{% if extremePagesLimit + 1 < currentPage - nearbyPagesLimit %}
<span class="sep-dots">...</span>
{% endif %}
{% for i in range(currentPage-nearbyPagesLimit, currentPage-1) if ( i > 0 ) %}
<a href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a>
{% endfor %}
{% elseif showAlwaysFirstAndLast %}
<span class="disabled">Previous</span>
{% endif %}
<a href="{{ path(paginationPath, currentFilters|merge({ page: currentPage })) }}"
class="active">{{ currentPage }}</a>
{% if currentPage < lastPage %}
{% for i in range(currentPage+1, currentPage + nearbyPagesLimit) if ( i <= lastPage ) %}
<a href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a>
{% endfor %}
{% if (lastPage - extremePagesLimit) > (currentPage + nearbyPagesLimit) %}
<span class="sep-dots">...</span>
{% endif %}
{% for i in range(lastPage - extremePagesLimit+1, lastPage) if ( i > currentPage + nearbyPagesLimit ) %}
<a href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a>
{% endfor %}
<a href="{{ path(paginationPath, currentFilters|merge({page: currentPage+1})) }}">Next</a>
{% elseif showAlwaysFirstAndLast %}
<span class="disabled">Next</span>
{% endif %}
</div>
{% endif %}
{% endspaceless %}
@SimonSimCity
Copy link
Author

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 %}

Feel free to star, fork, comment and whatever you can do with this code :)
It's licensed using the MIT license.

@SimonSimCity
Copy link
Author

If you're using this script outside of Symfony2, make sure you have a function called path() that handles url-generation ... http://twig.sensiolabs.org/doc/advanced.html#functions

@TiMiXx
Copy link

TiMiXx commented Mar 28, 2013

Ok version without path() function and bootstrap integration

{% 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 %}

    <div class="pagination pagination-centered">
        <ul>
        {% if currentPage > 1 %}
            <li><a href="{{ paginationPath }}{{ currentPage-1 }}">&larr;</a></li>

            {% for i in range(1, extremePagesLimit) if ( i < currentPage - nearbyPagesLimit ) %}
                <li><a href="{{ paginationPath }}{{ i }}">{{ i }}</a></li>
            {% endfor %}

            {% if extremePagesLimit + 1 < currentPage - nearbyPagesLimit %}
                <li class="disabled"><a href="#">...</a></li>
            {% endif %}

            {% for i in range(currentPage-nearbyPagesLimit, currentPage-1) if ( i > 0 ) %}
                <li><a href="{{ paginationPath }}{{ i }}">{{ i }}</a></li>
            {% endfor %}
        {% elseif showAlwaysFirstAndLast %}
            <li><a href="#">Previous</a></li>
        {% endif %}

        <li class="active"><a href="#">{{ currentPage }}</a></li>

        {% if currentPage < lastPage %}
            {% for i in range(currentPage+1, currentPage + nearbyPagesLimit) if ( i <= lastPage ) %}
                <li><a href="{{ paginationPath }}{{ i }}">{{ i }}</a></li>
            {% endfor %}

            {% if  (lastPage - extremePagesLimit) > (currentPage + nearbyPagesLimit) %}
               <li class="disabled"><a href="#">...</a></li>
            {% endif %}

            {% for i in range(lastPage - extremePagesLimit+1, lastPage) if ( i > currentPage + nearbyPagesLimit ) %}
               <li><a href="{{ paginationPath }}{{ i }}">{{ i }}</a></li>
            {% endfor %}

            <li><a href="{{ paginationPath }}{{ currentPage+1 }}">&rarr;</a></li>
        {% elseif showAlwaysFirstAndLast %}
                <li><a href="{{ paginationPath }}{{ currentPage+1 }}">Next</a></li>
        {% endif %}
                </ul>
    </div>
{% endif %}

@ambroisemaupate
Copy link

Thanks for this great gist!

@cppobj
Copy link

cppobj commented Nov 19, 2015

Thank you!

@anonbeat
Copy link

Thank you!!

@omerucel
Copy link

Without path function, we can use url_encode function. http://twig.sensiolabs.org/doc/filters/url_encode.html

{{ paginationPath ~ '?' ~ currentFilters|merge({page: i})|url_encode }}

@happygrizzly
Copy link

This is great! Thank you:) God bless you))

@3kynox
Copy link

3kynox commented Nov 22, 2016

Just fantastic, works great.

My splitting implementation using twig on a php standalone project :

#index.php

<?php

/*
 * MVC Website Entry - Only exposed file
 */

require_once('../vendor/autoload.php');
require('../src/controller/controller.php');

$ctrl = new Controller();

try {
    if (isset($_GET['action'])) {
        if ($_GET['action'] == 'game') {
            $ctrl->game();
        } elseif ($_GET['action'] == 'game_tutorial') {
            $ctrl->game_tutorial();
        } elseif ($_GET['action'] == 'game_leaderboard') {
            $ctrl->game_leaderboard(!isset($_GET['page']) ? 1 : $_GET['page']);
        }
    } else {
        $ctrl->home();
    }
}
catch (Exception $e) {
    echo '<html><body>' . $e->getMessage() . '</body></html>';
}

GET ('page'] is the important thing here. Followed by controller :

#controller.php

...
public function game_leaderboard($currentPage) {
        $leaderboard = getLeaderboard();
        $limit = 50; // leaderboard rows limit
        $offset = ($currentPage - 1) * $limit; // offset
        $totalItems = count($leaderboard); // total items
        $totalPages = ceil($totalItems / $limit);
        $itemsList = array_splice($leaderboard, $offset, $limit);

        $template = $this->twig->loadTemplate('viewLeaderboard.html.twig');
        echo $template->render(array(
            'leaderboard' => $itemsList,
            'currentPage' => $currentPage,
            'totalPages' => $totalPages
        ));
    }

getLeaderboard is just an api call where I get the itemList, then splitted, and finally sent to twig view.

Copy link

ghost commented Dec 22, 2016

Thank you!!

@amcosta
Copy link

amcosta commented Jan 28, 2017

Great job.

Thank you

@gtrocks
Copy link

gtrocks commented Feb 18, 2017

Hi ,

can you put the all code in single desk so, its easy for me to use ..

@TiMiXx using their post created a new file pagination.html.twig and included it in other template where i have to show the pagination but what changes i have to do on controller files to run it finally ?
please help i am new in symphony 2.

@ardentsword
Copy link

ardentsword commented Aug 23, 2017 •
edited
Loading

I required default settings for the input, it cleans up my templates a lot. If anyone needs it:

        {% if currentFilters is not defined %}{% set currentFilters = {} %}{% endif %}
        {% if paginationPath is not defined %}{% set paginationPath = app.request.attributes.get('_route') %}{% endif %}
        {% if showAlwaysFirstAndLast is not defined %}{% set showAlwaysFirstAndLast = true %}{% endif %}

The currentFilters are empty by default, the showAlwaysFirstAndLast is set to true and paginationPath is set to a variable automatically passed along in Symfony (3) with contains the current route.

Another (a bit shorter) way to include the template is:

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

Which can be reduced to this with the default vars:

{{ include('pagination.html.twig', { 
    currentPage: page,
    lastPage: totalPages
}) }}

I also modified my script a bit to work with Bootstrap (v4, maybe lower, untested) buttons, which looks quite refined in my opinion. Might be useful for someone:

{% 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 %}

        {% if currentFilters is not defined %}{% set currentFilters = {} %}{% endif %}
        {% if paginationPath is not defined %}{% set paginationPath = app.request.attributes.get('_route') %}{% endif %}
        {% if showAlwaysFirstAndLast is not defined %}{% set showAlwaysFirstAndLast = true %}{% endif %}

        <nav aria-label="Page navigation example">
        <ul class="pagination">
            {% if currentPage > 1 %}
                <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: currentPage-1})) }}">Previous</a></li>

                {% for i in range(1, extremePagesLimit) if ( i < currentPage - nearbyPagesLimit ) %}
                    <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a></li>
                {% endfor %}

                {% if extremePagesLimit + 1 < currentPage - nearbyPagesLimit %}
                    <span class="sep-dots">...</span>
                {% endif %}

                {% for i in range(currentPage-nearbyPagesLimit, currentPage-1) if ( i > 0 ) %}
                    <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a></li>
                {% endfor %}
            {% elseif showAlwaysFirstAndLast %}
                <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
            {% endif %}

            <li class="page-item active"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({ page: currentPage })) }}">{{ currentPage }}</a></li>

            {% if currentPage < lastPage %}
                {% for i in range(currentPage+1, currentPage + nearbyPagesLimit) if ( i <= lastPage ) %}
                    <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a></li>
                {% endfor %}

                {% if  (lastPage - extremePagesLimit) > (currentPage + nearbyPagesLimit) %}
                    <span class="sep-dots">...</span>
                {% endif %}

                {% for i in range(lastPage - extremePagesLimit+1, lastPage) if ( i > currentPage + nearbyPagesLimit ) %}
                    <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a></li>
                {% endfor %}

                <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: currentPage+1})) }}">Next</a></li>
            {% elseif showAlwaysFirstAndLast %}
                <li class="page-item disabled"><a class="page-link" href="#">Next</a></li>
            {% endif %}
        </ul>
        </nav>
    {% endif %}
{% endspaceless %}

Thanks a lot for creating this, helped safe me a lot of headache!

Fork: https://gist.github.com/ardentsword/4286d4bc71cb783657f6aa1ab52176fd

edit: Fix typo mentioned by @lemmingz

@lemmingz
Copy link

@ardentsword you have a typo with currentFilers vs currentFilters which always empties the current filters.

@brittonwalker
Copy link

@SimonSimCity Thank you so much for making this, you are my hero.

@GSAnthony
Copy link

Thank you for this gist and all other versions of this gist.

@ardentsword
Copy link

Another slight improvement for the issue I ran into today, when currentFilters is not defined, get the current route params:

{% if currentFilters is not defined %}{% set currentFilters = app.request.attributes.get('_route_params') %}{% endif %}

@ra0ued
Copy link

ra0ued commented Jan 30, 2018

Thank you!

@ljayz
Copy link

ljayz commented Feb 4, 2018

Thank you!

@alexcarpenter
Copy link

Might add aria-current="page" to the active pagination link for better accessibility.

@Grawl
Copy link

Grawl commented Jul 11, 2018 •
edited
Loading

I just updated it for my next work project using UIkit.

I added scope object and used all options from it.

Also I added two methods of URL building:

  • page number in URL query parameters like /news?page=4
  • page number directly after paginationPath option like /news/4

I replaced path() function with macros with |url_encode filter to convert an object to URL query string.

Here's a fork: https://gist.github.com/Grawl/5ebe19aa808e9b4371938a697b1597e8

Will be good to add an option to modify page URL query key to get /news?p=4 or /news?pagination=4

@KaiCMueller
Copy link

Thank you for the great work! I adapted your approach to build a paginator for the Symfony EasyAdmin bundle: https://gist.github.com/KaiCMueller/6692ee84f51341acf582e2103f05f3d4

@Matt-PMCT
Copy link

As a warning to newer users Twig is deprecating the if appended to the end of the for statements

@ulab
Copy link

ulab commented Feb 2, 2021 •
edited
Loading

Twig 2.10 deprecated the inline if statements in for loops. You now have to use filters instead or move the if inside of the loop:

https://twig.symfony.com/doc/2.x/filters/filter.html#filter

@AliAkinK
Copy link

I wish there could be an update for this without the depreciated for statements.

@ardentsword
Copy link

@ulab @AliAkinK I actually fixed this problem years ago but never thought about uploading it here, if anyone is still interested:
I'm actually still actively using it, and it works quite well :)

{#
  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
#}
{% apply 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 %}

        {% if currentFilters is not defined %}{% set currentFilters = app.request.attributes.get('_route_params')|merge(app.request.query.all) %}{% endif %}
        {% if paginationPath is not defined %}{% set paginationPath = app.request.attributes.get('_route') %}{% endif %}
        {% if showAlwaysFirstAndLast is not defined %}{% set showAlwaysFirstAndLast = true %}{% endif %}

        <nav aria-label="Page navigation">
        <ul class="pagination">
            {% if currentPage > 1 %}
                <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: currentPage-1})) }}">Previous</a></li>

                {% for i in range(1, extremePagesLimit) | filter(i => i < currentPage - nearbyPagesLimit ) %}
                    <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a></li>
                {% endfor %}

                {% if extremePagesLimit + 1 < currentPage - nearbyPagesLimit %}
                    <span class="sep-dots">...</span>
                {% endif %}

                {% for i in range(currentPage-nearbyPagesLimit, currentPage-1) | filter(i => i > 0 ) %}
                    <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a></li>
                {% endfor %}
            {% elseif showAlwaysFirstAndLast %}
                <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
            {% endif %}

            <li class="page-item active"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({ page: currentPage })) }}">{{ currentPage }}</a></li>

            {% if currentPage < lastPage %}
                {% for i in range(currentPage+1, currentPage + nearbyPagesLimit) | filter(i => i <= lastPage) %}
                    <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a></li>
                {% endfor %}

                {% if  (lastPage - extremePagesLimit) > (currentPage + nearbyPagesLimit) %}
                    <span class="sep-dots">...</span>
                {% endif %}

                {% for i in range(lastPage - extremePagesLimit+1, lastPage) | filter( i => i > currentPage + nearbyPagesLimit ) %}
                    <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: i})) }}">{{ i }}</a></li>
                {% endfor %}

                <li class="page-item"><a class="page-link" href="{{ path(paginationPath, currentFilters|merge({page: currentPage+1})) }}">Next</a></li>
            {% elseif showAlwaysFirstAndLast %}
                <li class="page-item disabled"><a class="page-link" href="#">Next</a></li>
            {% endif %}
        </ul>
        </nav>
    {% endif %}
{% endapply %}

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