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

用...省略过多的页码

作者: 葡萄柚子茶 | 来源:发表于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