Symfony 4 - 自定义 KnpPaginator 分页模板？

Posted 2023-04-14

技术标签:

【中文标题】Symfony 4 - 自定义 KnpPaginator 分页模板？【英文标题】：Symfony 4 - Customize KnpPaginator pagination template? 【发布时间】：2019-12-21 16:52:24 【问题描述】：

我希望自定义一个 KnpPaginator 分页模板，如下所示：

通常是一个简单的模板，我只想显示我所在的范围，带有最大值和上一个和下一个按钮。

我看到可以制作我们自己的模板。所以我想从已经存在的那些中汲取灵感，但我完全不明白它们是如何工作的，它们看起来彼此如此不同，我发现很难找到自己的方式并找到我必须使用的东西

有人可以帮帮我吗？

我有这个基本模板，但我不知道如何编辑它以获得我自己的自定义模板：

#
/**
 * @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 %

【问题讨论】：

【参考方案1】：

我相信您正在寻找类似以下代码的内容。您需要根据需要调整按钮格式。使用标准的 Bootstrap CSS，我的示例应该呈现类似的内容：

还要确保将 config/packages/knp_paginator.yaml 中的分页模板路径调整为您的 IE：分页：“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 %

【讨论】：

完美！就是这样！非常感谢你！ :)