关注公众号“轻松学编程”了解更多。- ​

分页

1、作用

数据加载优化

2、前端引入bootstrap样式:
{# 引入bootstrap样式的cdn资源 #}
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

引入分页器:

<div id="rootbox">
<h1>文章列表</h1>
<ul id="bloglist">
{# 遍历博文 #}
{% for blog in page.object_list %}
{# 显示博文标题 #}
<li>
<a href="{% url 'app:readblog' blog.id %}"><h3>{{ blog.title }}</h3></a>
</li>
{% endfor %}
</ul> {#分页器:html内容拷贝于bootstrap网站-组件-分页#}
{# bootstrap是一整套成熟经典的页面组件框架 #}
<nav aria-label="Page navigation">
<ul class="pagination">
{# 上一页按钮 #}
{# 如果有上一页 #}
{% if page.has_previous %}
<li>
{# 点击超链接,对上一页的页面发起访问 #}
<a href="{% url 'app:blogs' page.previous_page_number %}" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li> {# 如果没有上一页 #}
{% else %}
{# 当没有上一页时,阅读bootrap文档得知,对当前li使用disabled样式 #}
<li class="disabled">
{# href="#",处于禁用状态的按钮被点击时直接跳转本页 #}
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
{% endif %} {# 页码按钮 #}
{# 遍历传入的页码范围 #}
{% for p in pagerange %}
{# 如果页码=当前页页码 #}
{% ifequal p currentpage %}
{# 被选中的页码具有高亮效果,阅读bootrap文档得知,对当前li使用active样式 #}
{# {% url 'app:blogs' p %} 点击页码,对第p页的路由发起访问 #}
<li class="active"><a href="{% url 'app:blogs' p %}">{{ p }}</a></li>
{% else %}
{# 非当前页页码普通显示 #}
<li><a href="{% url 'app:blogs' p %}">{{ p }}</a></li>
{% endifequal %}
{% endfor %} {# 下一页按钮 #}
{% if page.has_next %}
<li>
{# 点击超链接,对下一页的页面发起访问 #}
<a href="{% url 'app:blogs' page.next_page_number %}" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a></li>
{% else %}
{# 当没有下一页时,阅读bootrap文档得知,对当前li使用disabled样式 #}
<li class="disabled">
{# href="#",处于禁用状态的按钮被点击时直接跳转本页 #}
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a></li>
{% endif %}
</ul>
</nav>
</div>
3、Paginator
  • 数据分页工具
  • 对象创建
    • Paginator(数据集,每一页数据数)
  • 属性
    • count:对象总数
    • page_range:页码列表,从1开始
    • num_pages:页面总数
  • 方法
    • page(整数): 获得一个page对象
  • 常见错误
    • InvalidPage:page()传递无效页码
    • PageNotAnInteger:page()传递的不是整数
    • Empty:page()传递的值有效,但是没有数据
4、Page
  • 具体的某一页面
  • 对象获得,通过Paginator的page()方法获得
  • 属性
    • object_list:当前页面上所有的数据对象
    • number:当前页的页码值
    • paginator: 当前page关联的Paginator对象
  • 方法
    • has_next():判断是否有下一页
    • has_previous():判断是否有上一页
    • has_other_pages():判断是否有上一页或下一页
    • next_page_number():返回下一页的页码
    • previous_page_number():返回上一页的页码
    • len():返回当前页的数据的个数
# 显示博文列表
# pagenum=路由参数=用户想要查看第几页
def showBlogs(request, pagenum):
# 查询数据库获取所有博文
blogs = Blog.objects.all() # 构建分页器对象,blogs=所有博文,2=每页显示的个数
paginator = Paginator(blogs, 2) # 获取第n页的页面对象
page = paginator.page(pagenum) # Paginator和Page的常用API
# page.previous_page_number()
# page.next_page_number()
# page.has_previous()
# page.has_next() # 构造页面渲染的数据
'''
渲染需要的数据:
- 当前页的博文对象列表
- 分页页码范围
- 当前页的页码
'''
data = {
# 当前页的博文对象列表
'page': page, # 分页页码范围
'pagerange': paginator.page_range, # 当前页的页码
'currentpage': page.number,
} # 将数据丢给页面渲染
return render(request, 'blogs.html', context=data)

后记

【后记】为了让大家能够轻松学编程,我创建了一个公众号【轻松学编程】,里面有让你快速学会编程的文章,当然也有一些干货提高你的编程水平,也有一些编程项目适合做一些课程设计等课题。

也可加我微信【1257309054】,拉你进群,大家一起交流学习。
如果文章对您有帮助,请我喝杯咖啡吧!

公众号

关注我,我们一起成长~~

Django之实现分页显示内容的更多相关文章

  1. JavaWeb分页显示内容之分页查询的三种思路(数据库分页查询)

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6134851.html 在开发过程中,经常做的一件事,也是最基本的事,就是从数据库中查询数据,然后在客户端显示出 ...

  2. element-ui 分页中的slot的用法(自定义分页显示内容)

    官方给的简单的例子以及效果. 最后弄成的效果: 按照文档在layout 添加slot, 这几个参数可以随意调换位置,然后分页显示效果会根据调换的位置显示相应内容.

  3. Python作业之分页显示内容

    #coding:utf8 user_list =[] for i in range(1,302): tmp = "{'user':'alex-%s,'email':'alex%s@email ...

  4. Django中html里的分页显示

    分页一(very low) 因为数据量过大,而又想直观便捷的查看数据,进而通过分页显示就可以完成这项工作 app中views.py LIST=[] #全局定义一个LIST for i in range ...

  5. Django项目:CRM(客户关系管理系统)--19--11PerfectCRM实现King_admin分页显示条数

    登陆密码设置参考 http://www.cnblogs.com/ujq3/p/8553784.html list_per_page = 2 #分页条数 list_per_page = 2 #分页条数 ...

  6. js 将很长的内容进行页面分页显示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. PHP——分页显示数据库内容

    test.php <?php header("Content-Type:text/html;charset=utf-8"); //加载分页类 include "pa ...

  8. Django之分页显示文章

    1.项目:http://www.cnblogs.com/jasonhaven/p/7493422.html 2.任务描述:页面分页显示文章 3.源代码 后台: from django.core.pag ...

  9. Django(四) 后台管理:创建管理员、注册模型类、自定义管理页面显示内容

    后台管理 第1步.本地化:设置语言.时区 修改project1/settings.py #LANGUAGE_CODE = 'en-us' LANGUAGE_CODE = 'zh-hans' #设置语言 ...

随机推荐

  1. Java知识系统回顾整理01基础04操作符06三元运算符

    一.三元运算符 表达式?值1:值2 如果表达式为真 返回值1 如果表达式为假 返回值2 if语句学习链接:if语句 public class HelloWorld { public static vo ...

  2. Communicating to 2 SPI Slaves with USART & SPI ports on Atmega16U2

    原文来自:https://www.avrfreaks.net/comment/2236256 I'm writing code for an embedded chip that consists o ...

  3. STM32之旅3——时钟数

    STM32之旅3--时钟数 STM32F1是M3内核,它的时钟数很庞大,让一个初学者去看,估计会很吃力,和我们入门的8051单片机的时钟不同,这里又倍频.又分频,而且还分成好多个时钟,不同的外设时钟不 ...

  4. SCOI 2008 【奖励关】

    早上的考试一道都做不出,被教做人,心态爆炸ing...... 题目描述: 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必 ...

  5. vue 组件的封装

    封装的原因 首先封装组件的需求肯定是多个地方要用到同一个东西,他们都有公共的地方,vue的封装 简单来说就是将公共参数封装起来 然后在需要的地方引入 //子组件封装 <template> ...

  6. coder初入职场必备:Eclipse+Tomcat8+MAVEN+SVN 工作环境搭建

    1.JDK的安装 首先下载JDK,这个从sun公司官网可以下载,根据自己的系统选择64位还是32位,安装过程就是next一路到底.安装完成之后当然要配置环境变量了. ----------------- ...

  7. 实验五 Internet与网络工具的使用

    实验五 Internet与网络工具的使用 [实验目的]⑴.FTP服务器的架设和客户端的使用. ⑵.使用云盘和云笔记应用 ⑶.运用QQ的远程协助功能. (4).默认安装foxmail软件,进行邮件的收发 ...

  8. 多测师讲解jmeter _接口请求_(003)高级讲师肖sir

    1.简单接口的请求 2. 3. 正则查看: 正则提取:在后置处理器中正则请求 设置:正则表达式 JSESSIONID提取器: Debug  sampler 总结:

  9. [论文阅读笔记] GEMSEC,Graph Embedding with Self Clustering

    [论文阅读笔记] GEMSEC: Graph Embedding with Self Clustering 本文结构 解决问题 主要贡献 算法原理 参考文献 (1) 解决问题 已经有一些工作在使用学习 ...

  10. webpack5文档解析(上)

    webpack5 声明:所有的文章demo都在我的仓库里 webpack5 起步 概念 webpack是用于编译JavaScript模块. 一个文件依赖另一个文件,包括静态资源(图片/css等),都会 ...