如何在Django中实现带首页、末页及省略号的分页

基于你现有的django-filter分页模板，要实现首页、末页按钮+页码省略号的效果（样式示例：首页 ... 3 4 [5] 6 7 ... 末页），可以按以下方式修改模板代码：

{% load templatehelpers %}
{% if page_obj.has_other_pages %}
    <nav aria-label="paginator">
        <ul class="pagination">
            <!-- 上一页按钮 -->
            {% if page_obj.has_previous %}
                <li class="page-item ">
                    <a class="page-link"
                       href="{% relative_url page_obj.previous_page_number 'page' request.GET.urlencode %}">
                        <i class="bi bi-arrow-left"></i>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a class="page-link">
                        <i class="bi bi-arrow-left"></i>
                    </a>
                </li>
            {% endif %}

            <!-- 首页按钮与前省略号 -->
            {% if page_obj.number > 4 %}
                <li class="page-item">
                    <a class="page-link" href="{% relative_url 1 'page' request.GET.urlencode %}">1</a>
                </li>
                {% if page_obj.number > 5 %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                {% endif %}
            {% endif %}

            <!-- 中间页码：当前页前后2页 -->
            {% for i in page_obj.paginator.page_range %}
                {% if page_obj.number == i %}
                    <li class="page-item active" aria-current="page">
                        <a class="page-link" href="{% relative_url i 'page' request.GET.urlencode %}">{{ i }}</a>
                    </li>
                {% elif i > page_obj.number|add:-3 and i < page_obj.number|add:3 %}
                    <li class="page-item">
                        <a class="page-link" href="{% relative_url i 'page' request.GET.urlencode %}">{{ i }}</a>
                    </li>
                {% endif %}
            {% endfor %}

            <!-- 后省略号与末页按钮 -->
            {% if page_obj.number < page_obj.paginator.num_pages|add:-3 %}
                {% if page_obj.number < page_obj.paginator.num_pages|add:-4 %}
                    <li class="page-item disabled">
                        <span class="page-link">...</span>
                    </li>
                {% endif %}
                <li class="page-item">
                    <a class="page-link" href="{% relative_url page_obj.paginator.num_pages 'page' request.GET.urlencode %}">{{ page_obj.paginator.num_pages }}</a>
                </li>
            {% endif %}

            <!-- 下一页按钮 -->
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link"
                       href="{% relative_url page_obj.next_page_number 'page' request.GET.urlencode %}">
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#">
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </li>
            {% endif %}
        </ul>
    </nav>
{% endif %}

关键逻辑说明： #

• 首页按钮：当当前页大于4时显示首页按钮；若当前页大于5，在首页和中间页码间添加不可点击的省略号，避免冗余页码。
• 中间页码：保留原逻辑，仅展示当前页前后2页的页码（如当前页为5时，显示3、4、5、6、7）。
• 末页按钮：当当前页距离末页还有4页以上时，先显示省略号再显示末页按钮；若距离末页3-4页，直接显示末页按钮。
• 样式统一：省略号使用disabled类设置为不可点击状态，保持分页栏视觉一致性。

内容的提问来源于stack exchange，提问作者Kirill_N