Symfony 4 - Customize KnpPaginator pagination template?

Question

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

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

Answer 1

I believe you are looking for something like the code below. You need to adjust buttons formatting to your needs. With standard Bootstrap CSS my example should render something alike to this:

Also make sure you adjusted the pagination template path in config/packages/knp_paginator.yaml to your's IE: pagination: "your/path/inside/templates/directory/your_template.yaml"

{% if pageCount > 1 %}
    items {{ firstItemNumber }} to {{ lastItemNumber }} of {{totalCount}}
    {% if previous is defined %}
            <a type="button" class="btn btn-secondary" rel="prev" href="{{ path(route, query|merge({(pageParameterName): previous})) }}">{{'<'}}</a>
    {% else %}
            <button type="button" class="btn btn-secondary" disabled><</button>
    {% endif %}
    {% if next is defined %}
            <a type="button" class="btn btn-secondary" rel="next" href="{{ path(route, query|merge({(pageParameterName): next})) }}"> > </a>
    {% else %}
        <button type="button" class="btn btn-secondary" disabled> > </button>
    {% endif %}
{% endif %}