一. 基本样式

主要优化内容:

#1. 当前页高亮
#2. 显示当前页及其前后两页
#3. 显示省略号标记
#4. 显示首尾页
#5. 将“页数描述文字”放置在“页码栏”下方
#6. “页码栏”与“页数描述文字”居中显示  

二. 当前页高亮

  在模版中判断显示的页码是否是当前的页码,若是,添加class='active'属性

{% for page_num in page_of_blogs.num_pages%}   {% 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 %}

三. 显示当前页及其前后两页

前两页 前一页 当前页 后一页 后两页
current_page-2 current_page-1 current_page current_page+1 current_page+2

  current_page-2 最小值为1,current_page+2最大值为分页器的最大页数

# 获取当前页码
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))

# 修改循环显示的页码范围
{% for page_num in 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 %}

四. 显示省略号标记

# 添加省略号标记
if (page_range[0] - 1 >= 2):page_range.insert(0,'...')
if (paginator.num_pages - page_range[-1] >= 2):page_range.append('...')

{% 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 %}

五. 显示首尾页

  将首页和尾页加入到page_range中

# 先加入'...'标记# 再将第一页与最后一页始终显示
if (page_range[0] != 1):page_range.insert(0,1)
if (page_range[-1] != paginator.num_pages):page_range.append(paginator.num_pages)

六. 将“页数描述”放置在“页码栏”下方,并居中显示

 <div class="paginator"><ul class="pagination"></ul><p>共有{{ page_of_blogs.paginator.count}}篇博客, 当前为第{{page_of_blogs.number}}页, 共{{page_of_blogs.paginator.num_pages}}页</p>
</div>

div.paginator {text-align: center;
}


注明:学习资料来自“再敲一行代码的个人空间”以及“杨仕航的博客”

转载于:https://www.cnblogs.com/AngryZe/p/9259701.html

[Django学习] Django基础(5)_优化分页器相关推荐

  1. 强化学习之基础入门_强化学习基础

    强化学习之基础入门 Reinforcement learning is probably one of the most relatable scientific approaches that re ...

  2. python学习需要基础吗_要学 Python 需要怎样的基础?

    人邮君来补充一点,编程也需要"语感训练"的理论基础.[内附Python语感训练资料] 看似虚无缥缈的"语感",对编程也有用? 在上世纪80年代,有一部BBC推出 ...

  3. 重拾强化学习的核心概念_强化学习的核心概念

    重拾强化学习的核心概念 By Hannah Peterson and George Williams (gwilliams@gsitechnology.com) 汉娜·彼得森 ( Hannah Pet ...

  4. Django学习之路-基础篇

    Django 学习之路 一.Django项目创建 1.项目结构 1.1. settings.py 文件 1.2 URL 1.3 视图函数 1.4 路由配置-path 二.请求与响应 2.1.请求和响应 ...

  5. django构建网页_通过解决问题的方式学习django,律师如何构建副业

    django构建网页 This post was originally published on Codementor's blog 该帖子最初发布在 Codementor的博客上 "I'm ...

  6. python基础学习[python编程从入门到实践读书笔记(连载三)]:django学习笔记web项目

    文章目录 Django项目:学习笔记web网页 项目部署 参考 自己部署的网站,还是小有成就感的,毕竟踩过很多坑,实战技能也有些许进步. 网站链接:http://lishizheng.herokuap ...

  7. 【Django 学习笔记】1、基础概念和MVT架构

    0x00 Django 简介 Django是Python写的开源Web开发框架,主要目的是做一个简便.快速的开发数据库驱动的网站 Django遵循MVC设计模式,在Django中有个专有名词,叫做MV ...

  8. 千锋Django学习笔记

    千锋Django学习笔记 文章目录 千锋Django学习笔记 写在前面 1. MVC和MTV 2. Django简介 3. MTV简单流程 4. 和Model的简单对接 5. Model 6. Tem ...

  9. 学习django就看这本书了!django book 2.0中文版

    所属网站分类: 资源下载 > python电子书 作者:熊猫烧香 链接:http://www.pythonheidong.com/blog/article/29/ 来源:python黑洞网 dj ...

最新文章

  1. python opencv 彩色图非局部平均去噪
  2. c语言指向常量的指针和常量指针
  3. 终端链接操作redis
  4. 一个小小的知识点,关于强制类型转换
  5. php修改mysql数据找不到_php 如何修改mysql数据
  6. 设置固定长度_加气块砌筑(构造柱、圈梁设置)技术交底21条
  7. mysql的to 打印_如何在MySQL存儲過程中模擬打印
  8. ASV2011新功能逐个数
  9. javaWEB知识总结——Ajax和Json
  10. txt转excel 处理数据
  11. 解决CAJ阅读器读取学位论文卡到爆炸的问题
  12. 《少有人走过的路–心智成熟的旅程》读书笔记
  13. Gentoo Ebuild 和 Overlay
  14. C# 滑块/滑杆/拖动条控件trackBar
  15. 视频播放–AVPlayer
  16. 两步验证 非双重认证
  17. 农夫约翰修篱笆-堆排序
  18. 编写Java程序,实现简单的五子棋博弈游戏(美和易思Java练习习题)
  19. UE4之生成pak文件
  20. 研究生应当常去的网站

热门文章

  1. 计算机网络 chapter3数据链路层
  2. 【LeetCode】231. Power of Two
  3. __gnu_cxx::hash_map使用中的一些问题
  4. 【Linux】Linux环境的搭建
  5. 【shell】Shell编程的前篇以及通过编程实现,jdk的安装
  6. python 传参数 传引用_Python 函数参数 传引用还是传值
  7. nginx 代理到其他端口_「从单体架构到分布式架构」请求增多,单点变集群(2):Nginx...
  8. linux 安装 中文输入法,[linux]安装中文输入法
  9. runtime java_Java runtime.getruntime()从执行命令行程序获得输出
  10. 如果你的 HTML 里全是 div,那就要小心了