优化分页展示

1.当前页高亮

{% for page_num in page_of_blogs.paginator.page_range %}
{% if page_num == page_of_blogs.number %}
<li class="active"><span>{{ page_num }}</span></li>
{% else %}
<li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
{% endif %}
{% endfor %}

page_num页码与当前页面页码相等时,给个actice类。span标签为了让当前页的页码不可点击。

2.不要过多页码选择,影响页面布局
在blog的views中的def blog_list(request)里,
current_page_num = page_of_blogs.number #当前页的页码
#获取当前页面前后2页的页码范围,利用range和max,min和list的拼接
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))
#加上省略标记 遍历开始和第一页的距离比较,遍历末尾和最后一页比较,差距大于等于2就加...
if page_range[0] - 1 >=2:
page_range.insert(0,'...')
if paginator.num_pages - page_range[-1] >= 2:
page_range.append('...')
#加上首页和尾页 开头既然加了...说明遍历开始与1大于等于2需要加...与首页,差距为1时不加...加首页,差距为0时都不加。末尾加了...说明遍历末尾距离全部页码大于等于2,加...再+尾页,
差距为1时不加...加尾页,差距为0时都不加。
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['blogs'] = page_of_blogs.object_list
context['page_of_blogs'] = page_of_blogs
context['page_range'] = page_range

前端页码优化当为...时不可点击。
{% 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 %}

views中接收一个博客列表,函数进行分页,并返回数据
def get_blog_list_common_date(request,blogs_all_list):
paginator = Paginator(blogs_all_list, settings.EACH_PAGE_BLOGS_NUMBER)
page_num = request.GET.get('page', 1)
page_of_blogs = paginator.get_page(page_num)
current_page_num = page_of_blogs.number # 当前页的页码
# 获取当前页面前后2页的页码范围
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 paginator.num_pages - page_range[-1] >= 2:
page_range.append('...')
# 加上首页和尾页
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['blogs'] = page_of_blogs.object_list
context['page_of_blogs'] = page_of_blogs
context['page_range'] = page_range
context['blog_types'] = BlogType.objects.all()
context['blog_dates'] = Blog.objects.dates('created_time', 'month', order='DESC')
return context
posted @ 2020-10-15 02:57  十方劫  阅读(111)  评论(0编辑  收藏  举报