在Symfony 3中将Bootstrap 4分页控制布局与KnpPaginatorBundle一起使用

如果你愿意改善显示超过1000个结果的页面的性能, 则是或是, 你将必须实现分页器。不仅是为了在浏览器中显示1K行, 可能会根据你使用的JavaScript或样式明显降低页面的性能, 此外, 并非所有用户都希望使用这些1K行进行滚动。

对于Symfony而言, KnpPaginatorBundle是最著名的捆绑软件, 它可以帮助你使用非常简单的API来对查询结果进行分页：

• 不需要初始化特定的适配器
• 可以按任何需要的方式进行自定义, 等等：分页视图, 事件订阅者。
• 可以根据请求参数添加自定义过滤, 排序功能。
• 关注点分离, 分页器仅负责生成分页视图, 即分页视图-用于表示目的。

你可以在config.yml中配置默认​​查询参数名称和模板, 并使用自定义分页模板。显示的最著名的模板之一是Bootstrap 3版本, 但是随着Bootstrap 4的引入, 直到官方包中还没有Bootstrap v4滑动分页控制模板。这就是为什么我们想与你分享我们在Twig中制作的Bootstrap 4的实现：

{#
/**
 * @file
 * Twitter Bootstrap v4 Sliding pagination control implementation.
 *
 * View that can be used with the pagination module
 * from the Twitter Bootstrap v4 CSS Toolkit
 * https://v4-alpha.getbootstrap.com/components/pagination/
 *
 * @author Carlos Delgado <dev@ourcodeworld.com>
 */
#}

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

        {% if startPage > 1 %}
            <li class="page-item">
                <a href="{{ path(route, query|merge({(pageParameterName): 1})) }}" class="page-link">1</a>
            </li>
            {% if startPage == 3 %}
                <li class="page-item">
                    <a href="{{ path(route, query|merge({(pageParameterName): 2})) }}" class="page-link">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 href="{{ path(route, query|merge({(pageParameterName): page})) }}" class="page-link">{{ page }}</a>
                </li>
            {% else %}
                <li class="active page-item">
                    <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 href="{{ path(route, query|merge({(pageParameterName): (pageCount - 1)})) }}" class="page-link">{{ pageCount -1 }}</a>
                    </li>
                {% endif %}
            {% endif %}
            <li>
                <a href="{{ path(route, query|merge({(pageParameterName): pageCount})) }}" class="page-link">{{ pageCount }}</a>
            </li>
        {% endif %}

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

在本例中, 我们将文件存储在app / resources / views / others / twitter_bootstrap_v4_pagination.html.twig目录中, 因此我们可以将分页程序包配置为在config.yml文件中使用以下yaml来使用此文件：

knp_paginator:
    template:
        pagination: "others/twitter_bootstrap_v4_pagination.html.twig"

现在你的项目实现了Bootstrap 4, 在使用最新的”稳定”版本的Bootstrap 4的类时, 分页器将正确呈现。

编码愉快！