美文网首页
用...省略过多的页码

用...省略过多的页码

作者: 葡萄柚子茶 | 来源:发表于2021-01-08 13:55 被阅读0次

参考文章
https://www.dusaiphoto.com/article/42/

templates/article/list.html

...

<!-- 页码导航 -->
<div class="pagination row">
    <div class="m-auto">
        <span class="step-links">
            <!-- 如果不是第一页,则显示上翻按钮 -->
            {% if articles.has_previous %}
                <a href="?page=1" class="btn btn-success">
                    &laquo; 1
                </a>
                <span>...</span>
                <a href="?page={{ articles.previous_page_number }}" 
                   class="btn btn-secondary"
                >
                    {{ articles.previous_page_number }}
                </a>
            {% endif %}

            <!-- 当前页面 -->
            <span class="current btn btn-danger btn-lg">
                {{ articles.number }}
            </span>

            <!-- 如果不是最末页,则显示下翻按钮 -->
            {% if articles.has_next %}
                <a href="?page={{ articles.next_page_number }}"
                   class="btn btn-secondary"
                >
                    {{ articles.next_page_number }}
                </a>
                <span>...</span>
                <a href="?page={{ articles.paginator.num_pages }}"
                   class="btn btn-success"
                >
                    {{ articles.paginator.num_pages }} &raquo;
                </a>
            {% endif %}
        </span>
    </div>
</div>

在自己的项目中加上了参数

<!-- 页码导航 -->
                            <div class="pagination row">
                                <div class="m-auto">
                                    <span class="step-links">
                                    <!-- 如果不是第一页,则显示上翻按钮 -->
                                    {% if page_obj.has_previous %}
{#                                        <a href="?page=1" class="btn btn-success">&laquo; 1</a>#}
                                        <a href="{{ request.path }}?user={{ request.GET.user }}&data={{ request.GET.data }}&page=1" class="btn btn-success">&laquo; 1</a>
                                        <span>...</span>
{#                                    <a href="?page={{ page_obj.previous_page_number }}" class="btn btn-secondary">{{ page_obj.previous_page_number }}</a>#}
                                    <a href="{{ request.path }}?user={{ request.GET.user }}&data={{ request.GET.data }}&page={{ page_obj.previous_page_number }}" class="btn btn-secondary">{{ page_obj.previous_page_number }}</a>

                                    {% endif %}

                                    <!-- 当前页面 -->
                                    <span class="current btn btn-danger btn-lg">
                                        {{ page_obj.number }}
                                    </span>

                                    <!-- 如果不是最末页,则显示下翻按钮 -->
                                    {% if page_obj.has_next %}
{#                                        <a href="?page={{ page_obj.next_page_number }}" class="btn btn-secondary">#}
{#                                            {{ page_obj.next_page_number }}#}
{#                                        </a>#}
                                        <a class="btn btn-secondary" href="{{ request.path }}?user={{ request.GET.user }}&data={{ request.GET.data }}&page={{ page_obj.next_page_number }}">{{ page_obj.next_page_number }}</a>
                                        <span>...</span>
{#                                        <a href="?page={{ page_obj.paginator.num_pages }}" class="btn btn-success">#}
{#                                            {{ page_obj.paginator.num_pages }} &raquo;#}
{#                                        </a>#}
                                        <a class="btn btn-success" href="{{ request.path }}?user={{ request.GET.user }}&data={{ request.GET.data }}&page={{ page_obj.paginator.num_pages }}">{{ page_obj.paginator.num_pages }}&raquo;</a>


                                    {% endif %}
                                    </span>
                                </div>
                            </div>


效果如下图:


image.png

相关文章

网友评论

      本文标题:用...省略过多的页码

      本文链接:https://www.haomeiwen.com/subject/vydbnktx.html