Symfony 4 – Customize KnpPaginator pagination template?

I’m looking to customize a KnpPaginator paging template to look like this:

enter image description here

It is a simple template normally, I just want to display the range in which I am located, with the max and a previous and next button.

I saw that it was possible to make our own templates. So I wanted to draw inspiration from those already existing, but I don’t understand at all how they work, they seem so different from each other, I find it hard to find my way and find what I have to use

Can someone help me please ?

I have this base template but I don’t know how edit it to have my own customization template :

{#
/**
 * @file
 * Twitter Bootstrap v4-beta.2 Sliding pagination control implementation.
 *
 * View that can be used with the pagination module
 * from the Twitter Bootstrap CSS Toolkit
 * https://getbootstrap.com/docs/4.0/components/pagination/
 *
 */
#}
{% if pageCount > 1 %}
    <nav>
        {% set classAlign = (align is not defined) ? '' : align=='center' ? ' justify-content-center' : (align=='right' ? ' justify-content-end' : '') %}
        {% set classSize = (size is not defined) ? '' : size=='large' ? ' pagination-lg' : (size=='small' ? ' pagination-sm' : '') %}
        <ul class="pagination{{ classAlign }}{{ classSize }}">

            {% if previous is defined %}
                <li class="page-item">
                    <a class="page-link" rel="prev" href="{{ path(route, query|merge({(pageParameterName): previous})) }}">&laquo;&nbsp;{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">&laquo;&nbsp;{{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</span>
                </li>
            {% endif %}

            {% if startPage > 1 %}
                <li class="page-item">
                    <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): 1})) }}">1</a>
                </li>
                {% if startPage == 3 %}
                    <li class="page-item">
                        <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): 2})) }}">2</a>
                    </li>
                {% elseif startPage != 2 %}
                    <li class="page-item disabled">
                        <span class="page-link">&hellip;</span>
                    </li>
                {% endif %}
            {% endif %}

            {% for page in pagesInRange %}
                {% if page != current %}
                    <li class="page-item">
                        <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): page})) }}">{{ page }}</a>
                    </li>
                {% else %}
                    <li class="page-item active">
                        <span class="page-link">{{ page }}</span>
                    </li>
                {% endif %}

            {% endfor %}

            {% if pageCount > endPage %}
                {% if pageCount > (endPage + 1) %}
                    {% if pageCount > (endPage + 2) %}
                        <li class="page-item disabled">
                            <span class="page-link">&hellip;</span>
                        </li>
                    {% else %}
                        <li class="page-item">
                            <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): (pageCount - 1)})) }}">{{ pageCount -1 }}</a>
                        </li>
                    {% endif %}
                {% endif %}
                <li class="page-item">
                    <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): pageCount})) }}">{{ pageCount }}</a>
                </li>
            {% endif %}

            {% if next is defined %}
                <li class="page-item">
                    <a class="page-link" rel="next" href="{{ path(route, query|merge({(pageParameterName): next})) }}">{{ 'label_next'|trans({}, 'KnpPaginatorBundle') }}&nbsp;&raquo;</a>
                </li>
            {% else %}
                <li  class="page-item disabled">
                    <span class="page-link">{{ 'label_next'|trans({}, 'KnpPaginatorBundle') }}&nbsp;&raquo;</span>
                </li>
            {% endif %}
        </ul>
    </nav>
{% endif %}

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *