Django2.0 + ListView + Pagination

折腾了一番,终于把django中的ListView视图的分页效果做好了,话不多说,首先展示的是效果图:
Django2.0 + ListView + Pagination

相关代码如下:

views.js

class IndexView(ListView):
    model = User
    template_name = 'users/index.html'
    paginate_by = 5 #每页显示多少条数据
    ordering = 'username'   #以username字段排序
    context_object_name = 'users'  # 传到template中的list
    page_kwarg = 'page'  # 获取第几页的数据的参数名称(?page=xxx)。默认是`page`

    def get_context_data(self, **kwargs):
        context = super(IndexView, self).get_context_data(**kwargs)
        current_page = context.get('page_obj').number  #当前页
        total_page = context.get('paginator').num_pages  #总共的页数

        if current_page<=5:
            pagerange = range(1,5)
        elif 7<current_page< total_page and (current_page+2)<total_page:
            pagerange = range(current_page-2,current_page+2)
        else:
            pagerange = range(total_page-4,total_page+1)
        context['pagerange'] = pagerange
        return context

template:
这里用的是bootstrap的样式

   <ul class="pagination">
        {% if page_obj.has_previous %}
            <li><a href="?page={{ page_obj.previous_page_number }}">上一页</a></li>
        {% else %}
            <li class="disable"><a href="#">上一页</a></li>
        {% endif %}
        <li><a href="?page=1">首页</a> </li>

        {% for page in pagerange%}
            {% if page == page_obj.number %}
                <li class="active"><a href="?page={{ page }}">{{ page }}</a></li>
            {% else %}
               <li><a href="?page={{ page }}">{{ page }}</a></li>
            {% endif %}
        {% endfor %}

        <li><a href="?page={{ paginator.num_pages }}">尾页</a> </li>
        {% if page_obj.has_next %}
            <li><a href="?page={{ page_obj.next_page_number }}">下一页</a></li>
        {% else %}
            <li class="disable"><a href="#">下一页</a></li>
        {% endif %}
        <li> <span class="paginat" style="color:#337AB7;">共 {{ paginator.num_pages }} 页</span></li>
        <li> <span style="color:#337AB7;">共 {{paginator.count }} 条记录</span></li>
    </ul>

就是这么简单!