Django-前端分页效果

Paginator和Page类：

Paginator和Page类都是用来做分页的。他们在Django中的路径为django.core.paginator.Paginator和django.core.paginator.Page。以下对这两个类的常用属性和方法做解释：

Paginator常用属性和方法：

count：总共有多少条数据。
num_pages：总共有多少页。
page_range：页面的区间。比如有三页，那么就range(1,4)。

Page常用属性和方法：

has_next：是否还有下一页。
has_previous：是否还有上一页。
next_page_number：下一页的页码。
previous_page_number：上一页的页码。
number：当前页。

Python源码如下：

class ArticleListViews(ListView):
    model = Article
    template_name = 'article_list.html'
    context_object_name = 'articles'
    paginate_by = 10
    ordering = 'create_time'
    page_kwarg = 'p'

    def get_context_data(self, **kwargs):
        context = super(ArticleListViews, self).get_context_data(*kwargs)
        paginator = context.get('paginator')
        page_obj = context.get("page_obj")

        pagination_data = self.get_paginator_data(paginator, page_obj, around_count=2)
        context.update(pagination_data)
        return context

    def get_paginator_data(self, paginator, page_obj, around_count=2):
        current_page = page_obj.number  # 获取当前页
        num_pages = paginator.num_pages  # 总的页数

        left_has_more = False
        right_has_more = False

        if current_page <= around_count + 2:
            left_pages = range(1, current_page)
        else:
            left_has_more = True
            left_pages = range(current_page - around_count, current_page)

        if current_page >= num_pages - around_count - 1:
            right_pages = range(current_page + 1, num_pages + 1)
        else:
            right_has_more = True
            right_pages = range(current_page + 1, current_page + around_count + 1)  # 左闭右开区间

        return {
            'left_pages': left_pages,
            'right_pages': right_pages,
            'current_page': current_page,
            'left_has_more': left_has_more,
            'right_has_more': right_has_more,
            'num_pages': num_pages
        }

前端界面源码如下：

    
    
    


    

         {# 遍历所有数据 #}
        {% for article in articles %}
            
{{ article.title }}
        {% endfor %}
        {# 引用boorstrap分页组件 #}
        

        {# 显示上一页 #}
            {% if page_obj.has_previous %}
                
上一页
            {% else %}
                
上一页
            {% endif %}
        
        {# 显示左边页码 #}
        {% if left_has_more %}
            
1
            
...
        {% endif %}

        {% for left_page in left_pages %}
            
{{ left_page }}
        {% endfor %}

        {# 显示当前页 #}
        
{{ current_page }}

        {# 显示右边页码 #}
        {% for right_page in right_pages %}
            
{{ right_page }}
        {% endfor %}
        
        {% if right_has_more %}
            
...
            
{{ num_pages }}
        {% endif %}
        
        {# 显示下一页 #}
        {% if page_obj.has_next %}
            
下一页
        {% else %}
            
下一页
        {% endif %}
        
    

效果图：

bootstrap实现分页