Web页面的页码导航功能实现

实现这样的页码导航功能

在视图函数里导入模块以及模型

from django.views.generic import ListView
from front.models import Article

class ArticleListView(ListView):
    # 指定模板
    model = Article
    # 模板
    template_name = 'article_list1.html'
    # 渲染到模板上的对象
    context_object_name = 'articles'
    #每一页展示多少条数据
    paginate_by = 10
    #排序方式，以创建时间排序
    ordering = 'create_time'
    # url参数，用户传递第几页
    page_kwarg = 'page'

定义函数，获取上下文数据，以及Pageinator、Page对象，注意要返回

    def get_context_data(self, **kwargs):
        context = super(ArticleListView, self).get_context_data(**kwargs)
        #获取Pageinator和Page对象
        paginator = context.get('paginator')
        page_obj = context.get('page_obj')
        # print(paginator,page_obj)
        paginaton_date = self.get_pagination_date(paginator,page_obj)
        context.update(paginaton_date)
        return context

自定义页码规则，让上部分使用，

   # 自定义方法
    def get_pagination_date(self,paginator,page_obj,aroud_count=2):
        # 当前页码，以这个为参照
        current_page = page_obj.number
        # 总共有多少页
        num_pages = paginator.num_pages
        left_has_more = False
        right_has_more = False

        if current_page <= aroud_count + 2:
                    # 如果页码数小于5 直接显示12345
            left_page = range(1,current_page)
        else:
            left_has_more = True
            left_page = range(current_page-aroud_count,current_page)

        if current_page >= num_pages -aroud_count -1:
            # 同左
            right_page = range(current_page+1,num_pages+1)
        else:
            right_has_more = True
            # 比如 当前的页码是8，8+1 10，只显示到这
            right_page = range(current_page+1,current_page+aroud_count+1)
        return {
            'current_page':current_page,
            'left_pages':left_page,
            'right_pages':right_page,
            'left_has_more':left_has_more,
            'right_has_more':right_has_more,
            'num_pages':num_pages
        }

视图部分已经弄好了，接下来就是页面的HTML部分了，遍历接收数据进行页面渲染，

<ul style="list-style: none">
    {% for article in articles %}
        <li>{{ article.title }}</li>
    {% endfor %}
</ul>

渲染数据没有问题，就开始给页码注入灵魂了

    <ul class="pagination">
        {#      上一页跳转功能#}
        {% if page_obj.has_previous %}
            <li>
                <a href="{% url 'front:list' %}?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="javascript:void(0)" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% endif %}
                {#  中间页 #}
    {% if left_has_more %}
        <li><a href="{% url 'front:list' %}?page=1">1</a></li>
        <li><a href="javascript:void(0)">...</a></li>
    {% endif %}
    {#    左边的页码#}
    {% for left_page in left_pages %}
        <li><a href="{% url 'front:list' %}?page={{ left_page }}">
            {{ left_page }}
        </a></li>
    {% endfor %}

当前被选中的页码状态

{#    当前的页码#}
    <li class="active"><a href="{% url 'front:list' %}?page={{ current_page }}">
        {{ current_page }}
    </a></li>

跟左边一样的右边也是一样的实现

{#    右边的页码#}
    {% for right_page in right_pages %}
        <li><a href="{% url 'front:list' %}?page={{ right_page }}">
            {{ right_page }}
        </a></li>
    {% endfor %}

    {% if right_has_more %}
        <li><a href="javascript:void (0)">...</a></li>
        <li><a href="{% url 'front:list' %}?page={{ num_pages }}">
            {{ num_pages }}
        </a></li>
    {% endif %}
            {#下一页跳转功能#}
        {% if page_obj.has_next %}
            <li>
                <a href="{% url 'front:list' %}?page={{ page_obj.next_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        {% else %}
            <li class="disabled">
                <a href="javascript:void(0)" aria-label="Previous">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% endif %}
      </ul>

最后，