Django2.0：【Django2.0教程】14.优化分页展示 视频学习笔记

视频链接：14.优化分页展示

当前页高亮

修改blog/templates/blog/blog_list.html：

...
<ul class="pagination">
    <li>
        {# 上一页 #}
        {% if page_of_blogs.has_previous %}
            <a href="?page={{ page_of_blogs.previous_page_number }}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        {% else %}
            <span aria-hidden="true">&laquo;</span>
        {% endif %}
    </li>
        {# 页码 #}
        {% for page_num in page_of_blogs.paginator.page_range %}
            {% if page_num == page_of_blogs.number %}
                <li class="active"><a href="?page={{ page_num }}">{{ page_num }}</a></li>
            {% else %}
                <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
            {% endif %}  
        {% endfor %}
    <li>
        {# 下一页 #}
        {% if page_of_blogs.has_next %}
            <a href="?page={{ page_of_blogs.next_page_number }}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
         {% else %}
            <span aria-hidden="true">&raquo;</span>
         {% endif %}
    </li>
</ul>
...

多页码缩减显示

页码最多显示连续五个

修改blog/views.py：

def blog_list(request):  
    blogs_all_list = Blog.objects.all()
    paginator = Paginator(blogs_all_list, 2)
    page_num = request.GET.get('page', 1) # 获取url的页码参数。GET返回字典，page_num默认为1
    page_of_blogs = paginator.get_page(page_num)
    current_page_num = page_of_blogs.number # 获取当前页码
    # 获取前后各页
    page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))

    context = {}
    context['page_of_blogs'] = page_of_blogs
    # context['blogs_count'] = Blog.objects.all().count()
    context['blog_types'] = BlogType.objects.all()
    context['page_range'] = page_range
    return render_to_response('blog/blog_list.html', context)

...

修改blog/templates/blog/blog_list.html对应的位置：

...
{# 页码 #}
{% for page_num in page_range %}
...

显示首尾页码

修改blog/views.py：

...
# 获取前后各页
    page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
    if page_range[0] != 1:
        page_range.insert(0, 1)
    if page_range[-1] != paginator.num_pages:
        page_range.append(paginator.num_pages)
...

显示省略号

修改blog/views.py：

...
# 获取前后各页
    page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
    # 加上省略号
    if page_range[0] - 1 >= 2:
        page_range.insert(0, '...')
    if page_range[-1] != paginator.num_pages:
        page_range.append(paginator.num_pages)
    #  加上首尾页码
    if page_range[0] != 1:
        page_range.insert(0, 1)
    if page_range[-1] != paginator.num_pages:
        page_range.append(paginator.num_pages)
...

修改blog/templates/blog/blog_list.html：

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-md-9 col-lg-10">
                <div class="panel panel-default">
                    ...
                </div>
                <div class="paginator">
                    <ul class="pagination">
                        <li>
                            {# 上一页 #}
                            ...
                        </li>
                            {# 页码 #}
                            {% for page_num in page_range %}
                                {% if page_num == page_of_blogs.number %}
                                    <li class="active"><span>{{ page_num }}</span></li>
                                {% else %}
                                    {% if page_num == '...' %}
                                        <li><span>{{ page_num }}</span></li>
                                    {% else %}
                                        <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                                    {% endif %}

                                {% endif %}  
                            {% endfor %}
                        <li>
                            {# 下一页 #}
                            ...
                        </li>
                    </ul>
                    <p>共有{{ page_of_blogs.paginator.count }}篇博文，当前第{{page_of_blogs.number}}页，共{{page_of_blogs.paginator.num_pages}}页 </p>                    
                </div>
            </div>
    ...
        </div>
    </div>
{% endblock %}

修改blog/static/blog/blog.css：

...
div.paginator {
    text-align: center;
}
...

优化博客分类页面

改blog/views.py：

# 在blog_list()方法基础上修改
def blogs_with_type(request, blog_type_pk):
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)   
    blogs_all_list = Blog.objects.filter(blog_type=blog_type)
    paginator = Paginator(blogs_all_list, 2)
    page_num = request.GET.get('page', 1) # 获取url的页码参数。GET返回字典，page_num默认为1
    page_of_blogs = paginator.get_page(page_num)
    current_page_num = page_of_blogs.number # 获取当前页码
    # 获取前后各页
    page_range = list(range(max(current_page_num - 2, 1), current_page_num)) + list(range(current_page_num, min(current_page_num + 2, paginator.num_pages) + 1))
    # 加上省略号
    if page_range[0] - 1 >= 2:
        page_range.insert(0, '...')
    if page_range[-1] != paginator.num_pages:
        page_range.append(paginator.num_pages)
    #  加上首尾页码
    if page_range[0] != 1:
        page_range.insert(0, 1)
    if page_range[-1] != paginator.num_pages:
        page_range.append(paginator.num_pages)

    context = {}
    context['blog_type'] = blog_type
    context['blogs'] = page_of_blogs.object_list
    context['page_of_blogs'] = page_of_blogs
    context['blog_types'] = BlogType.objects.all()
    context['page_range'] = page_range
    return render_to_response('blog/blogs_with_type.html', context)

settings自定义设置

超参数可以放在mysite/settings.py中设置。比如将每页显示多少博文的数量作为超参数放于mysite/settings.py中：

...
BLOGS_NUM_PER_PAGE = 7
...

修改blog/views.py；

...
from django.conf import settings
...
    paginator = Paginator(blogs_all_list, settings.BLOGS_NUM_PER_PAGE)
...