Django实战项目-学习任务系统-查询列表分页显示

接着上期代码框架,6个主要功能基本实现,剩下的就是细节点的完善优化了。

接着优化查询列表分页显示功能,有很多菜单功能都有查询列表显示页面情况,如果数据量多,不分页显示的话,页面展示效果就不太好。

本次增加查询列表分页显示功能,对一个查询列表功能进行分页改造,其他依此类推即可。

第一步:Django的分页器(paginator)简介

Django的分页器(paginator)是一个内置的分页组件,它可以方便地实现分页功能。当页面需要显示大量数据时,例如超过10000条,使用分页器可以提高阅读体验并减轻服务器压力。

要使用Django的分页器,首先需要从`django.core.paginator`模块中引入`Paginator`类以及相关的异常模块:`PageNotAnInteger`和`EmptyPage`。

`Paginator`是用于管理整个分页的逻辑,如控制总共有多少页、页码区间等。而`Page`类则是用来管理当前这个页面的一些属性。

以下是创建`Paginator`对象的简单语法:
```python
class Paginator(object_list, per_page, orphans=0, allow_empty_first_page=True)
```
其中,`object_list`是你要分页的数据列表,`per_page`是每页显示的数据条数。

例如:
给 Paginator 一个对象列表,以及你希望在每个页面上拥有的项目数,它提供了访问每页项目的方法:

>>> from django.core.paginator import Paginator
>>> objects = ['john', 'paul', 'george', 'ringo']
>>> p = Paginator(objects, 2)>>> p.count
4
>>> p.num_pages
2
>>> type(p.page_range)
<class 'range_iterator'>
>>> p.page_range
range(1, 3)>>> page1 = p.page(1)
>>> page1
<Page 1 of 2>
>>> page1.object_list
['john', 'paul']>>> page2 = p.page(2)
>>> page2.object_list
['george', 'ringo']
>>> page2.has_next()
False
>>> page2.has_previous()
True
>>> page2.has_other_pages()
True
>>> page2.next_page_number()
Traceback (most recent call last):
...
EmptyPage: That page contains no results
>>> page2.previous_page_number()
1
>>> page2.start_index() # The 1-based index of the first item on this page
3
>>> page2.end_index() # The 1-based index of the last item on this page
4>>> p.page(0)
Traceback (most recent call last):
...
EmptyPage: That page number is less than 1
>>> p.page(3)
Traceback (most recent call last):
...
EmptyPage: That page contains no results

第二步:修改视图文件
./mysite/study_system/views.py

def getStudyPointsList(request):'''@方法名称: 获取积分明细列表@作    者: PandaCode辉@weixin公众号: PandaCode辉@创建时间: 2023-10-10'''# 响应容器rsp_dict = {}# 获取当前用户名username = request.session.get('username')# 根据用户名获取用户对象cur_user = StudyUser.objects.get(username=username)print('根据用户名查询用户对象:' + str(cur_user))# 2. 获取要分页的数据集合(例如从数据库查询),当前用户的全部积分明细, .order_by('-created_time') 降序排列data_list = StudyPoint.objects.filter(user_id=cur_user).order_by('-created_time')# 3. 每页显示的数据数量items_per_page = 5# 4. 创建 Paginator 对象paginator = Paginator(data_list, items_per_page)# 5. 获取当前页数(从请求参数中获取,或者默认为第一页)current_page_num = request.GET.get('page', 1)'''1.整个数据表paginator.count   数据总数paginator.num_pages   总页数paginator.page_range   页码的列表2.当前页curuent_page.has_next()   是否有下一页curuent_page.next_page_number()   下一页的页码curuent_page.has_previous()   是否有上一页curuent_page.previous_page_number()   上一页的页码'''# 6. 获取当前页的数据对象try:current_page_data = paginator.page(current_page_num)except EmptyPage:# 处理页码超出范围的情况current_page_data = paginator.page(paginator.num_pages)# 获取整个表的总页数total_page = paginator.num_pagespag_range = []if total_page <= 11:  # 判断当前页是否小于11个pag_range = paginator.page_rangeelif total_page > 11:if current_page_num < 6:pag_range = range(1, 11)elif current_page_num > paginator.num_pages - 5:pag_range = range(total_page - 9, total_page + 1)else:pag_range = range(current_page_num - 5, current_page_num + 5)  # 当前页+5大于最大页数时# 7. 在模板中使用 current_data_page 来渲染分页数据# 查询待完成任务列表rsp_dict['data_list'] = data_listrsp_dict['paginator'] = paginatorrsp_dict['current_page_num'] = current_page_numrsp_dict['current_page_data'] = current_page_datarsp_dict['pag_range'] = pag_rangecontext_object_name = "study_points_list"template_name = "study_system/home.html"# 'html_file': 'xxx.html' 动态指定模板页面 ; 'menuTo': 'task' = 任务管理 ;rsp_dict['html_file'] = 'study_system/item/studyPointsList.html'rsp_dict['context_object_name'] = context_object_namereturn render(request, template_name, rsp_dict)

第三步:修改页面模板代码

1. 积分流水列表页面
./mysite/study_system/templates/study_system/item/studyPointsList.html

<style type="text/css">table tr td {font-size: 1.5em;}
</style>
<!-- 结果显示区 -->
<div align="center"><table style='width: 100%;'><tr><td colspan="6" align="center">积分明细流水</td></tr><tr style="font-weight: bold; background: #FFEC8B;text-align: center"><td>序号</td><td>积分说明</td><td>交易类型</td><td>积分数</td><td>交易时间</td><td>用户名</td></tr>{% if current_page_data %}{% for studyPoints in current_page_data %}{% if studyPoints.point_type == 0 %}<tr style="color: blue;text-align: center">{# forloop.counter 可以记录循环的次数,作为列表序号#}<td>{{ forloop.counter }}</td><td>{{ studyPoints.point_name }}</td><td>兑换物品</td><td>{{ studyPoints.points_nums }}</td><td>{{ studyPoints.created_time|date:'Y-m-d H:i:s' }}</td><td>{{ studyPoints.user_id.username }}</td></tr>{% elif studyPoints.point_type == 1 %}<tr style="color: red;text-align: center"><td>{{ forloop.counter }}</td><td>{{ studyPoints.point_name }}</td><td>成功奖励</td><td>{{ studyPoints.points_nums }}</td><td>{{ studyPoints.created_time|date:'Y-m-d H:i:s' }}</td><td>{{ studyPoints.user_id.username }}</td></tr>{% elif studyPoints.point_type == 2 %}<tr style="color: green;text-align: center"><td>{{ forloop.counter }}</td><td>{{ studyPoints.point_name }}</td><td>失败处罚</td><td>{{ studyPoints.points_nums }}</td><td>{{ studyPoints.created_time|date:'Y-m-d H:i:s' }}</td><td>{{ studyPoints.user_id.username }}</td></tr>{% endif %}{% endfor %}{% else %}<tr><td colspan="6" id="con_title">查无记录</td></tr>{% endif %}</table>
</div>
<div align="center">{% include "study_system/common/page.html" %}
</div>

2. 公共页码页面
./mysite/study_system/templates/study_system/common/page.html

<div><nav aria-label="Page navigation"><ul class="pagination">{% if not current_page_data.has_previous %}<!--判断是否有上一页--><li class="disable"><a href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>{% else %}<li><a href="?page={{ current_page_data.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>{% endif %}{% for page_range in pag_range %}{% if current_page_num == page_range %}<!--判断遍历的页数是否为当前页,是就添加.avtive 背景色变蓝--><li class="active"><a href="?page={{ page_range }}">{{ page_range }}</a></li>{% else %}<li><a href="?page={{ page_range }}">{{ page_range }}</a></li>{% endif %}{% endfor %}{% if not current_page_data.has_next %}<!-- 判断是否最后一页 --><li class="disable"><a href="?page={{ current_page_num }}" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>{% else %}<li><a href="?page={{ current_page_data.next_page_number }}" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>{% endif %}</ul></nav>
</div>

第四步:运行测试

1. 点击查看积分流水列表页面

 -------------------------------------------------end -------------------------------------------------

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/132789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jQuery进阶

十三. jq书写代码的3种位置 """js中等待页面加载完毕""" # 等待页面加载完毕再执行代码 window.onload function(){// js代码 }"""jQuery中等待页面加载完毕""" # 第一种 $(document).ready(function(){// js代…

Spring AOP 简介

一、Spring AOP AOP 是一种思想&#xff0c;而 Spring AOP 是一个框架&#xff0c;提供了一种对 AOP 思想的实现。 1、什么是 AOP&#xff1f; AOP&#xff08;Aspect Oriented Programming&#xff09;&#xff1a;是一种编程思想&#xff0c;表示面向切面编程。指的是对某…

小程序video标签在底部出现1px无法去除的黑色线

问题描述 参见社区问题详情 此问题只会在ios手机真机中出现&#xff0c;视频底部出现1px无法去除的黑色线 解决方法 1.尝试过video各种配置&#xff0c;以为是设置参数导致 2.尝试过父元素设置height&#xff1a;200px&#xff1b;overflow&#xff1a;hidden&#xff1b;vi…

python栈_简单算术表达式_加减乘除

# 从左到右遍历中缀表达式中的每个数字和符号&#xff0c;若是数字就输出&#xff0c;即成为后缀表达式的一部分&#xff1b;若是符号则要分为两种情况&#xff1a; # (1)是括号时&#xff0c;如果是左括号&#xff0c;直接将左括号入栈&#xff0c;如果是右括号则栈顶元素依次…

插件_日期_lunar-calendar公历农历转换

现在存在某需求&#xff0c;需要将公历、农历日期进行相互转换&#xff0c;在此借助lunar-calendar插件完成。 下载 [1] 通过npm安装 npm install lunar-calendar[2]通过文件方式引入 <script type"text/javascript" src"lib/LunarCalendar.min.js">…

2.3 矩阵消元

一、消元矩阵 消元矩阵执行消元步骤用到的矩阵。从第 i i i 个方程减去 l i j l_{ij} lij​ 乘第 j j j 个方程&#xff08;将 x j x_j xj​ 从第 i i i 行中消去&#xff09;。我们需要很多个简单的矩阵 E i j E_{ij} Eij​&#xff0c;每一个对应一个主对角线下方要消…

React 项目结构小结

React 项目结构小结 简单的记录一下目前 React 项目用的依赖和实现 摸索了大半年了大概构建一套用起来还算轻松的体系……&#xff1f;基本上应该是说可以应对大部分的项目了 使用的依赖 目前项目还在 refactoring 的阶段&#xff0c;所以乱得很&#xff0c;这里是新建一个…

有什么好用的CRM客户管理系统?推荐这5大高口碑的CRM系统!

有什么好用的CRM客户管理系统&#xff1f;推荐这5大高口碑的CRM系统&#xff01; 好用的CRM客户管理系统&#xff1a; ①需要进行精细化管理 ②需要专业的管理工具 ③最好能够做到和erp系统和oa系统的集成 授人以鱼不如授人以渔&#xff0c;在给题主推荐crm系统之前&#…

MySQL 是否大小写敏感

本文未做特别说明的&#xff0c;指同时适用于 MySQL 5.7 和 MySQL 8.x。 先说结论&#xff1a; 数据库、表名&#xff08;包括别名&#xff09;、触发器名是否大小写敏感与操作系统以及 MySQL 配置有关。列名&#xff08;包括别名&#xff09;、索引、存储过程和事件名称大小写…

高数笔记06:无穷级数

图源&#xff1a;文心一言 时间比较紧张&#xff0c;仅导图~~&#x1f95d;&#x1f95d; 第1版&#xff1a;查资料、画导图~&#x1f9e9;&#x1f9e9; 参考资料&#xff1a;《高等数学 基础篇》武忠祥 &#x1f433;目录 &#x1f433;常数项级数 &#x1f40b;概要 &…

C++基础——对于C语言缺点的补充(2)

上篇文章中说到&#xff0c;为了解决C语言会出现人为定义的函数和库函数出现重定义的错误&#xff0c;C引入了一个新的概念&#xff0c;即命名空间&#xff0c;通过认为定义命名空间&#xff0c;来解决上述问题。 在本篇文章中&#xff0c;将继续介绍C相对于C语言不足来进行的补…

Node.js、Chrome V8 引擎、非阻塞式I/O介绍

目录 Node.js介绍Chrome V8 引擎介绍非阻塞式I/O介绍 &#x1f44d; 点赞&#xff0c;你的认可是我创作的动力&#xff01; ⭐️ 收藏&#xff0c;你的青睐是我努力的方向&#xff01; ✏️ 评论&#xff0c;你的意见是我进步的财富&#xff01; Node.js介绍 Node.js 是一个…

Harbor企业级Registry基础镜像仓库的详细安装使用教程(保姆级)

Harbor Docker 官方提供的私有仓库 registry&#xff0c;用起来虽然简单 &#xff0c;但在管理的功能上存在不足。 Harbor是vmware一个用于存储和分发Docker镜像的企业级Registry服务器&#xff0c;harbor使用的是官方的docker registry(v2命名是distribution)服务去完成。 ha…

数据结构之堆的实现(图解➕源代码)

一、堆的定义 首先明确堆是一种特殊的完全二叉树&#xff0c;分为大根堆和小根堆&#xff0c;接下来我们就分别介绍一下这两种不同的堆。 1.1 大根堆&#xff08;简称&#xff1a;大堆&#xff09; 在大堆里面&#xff1a;父节点的值 ≥ 孩子节点的值 我们的兄弟节点没有限制&…

pandas 笔记:get_dummies分类变量one-hot化

1 函数介绍 pandas.get_dummies 是 pandas 库中的一个函数&#xff0c;它用于将分类变量转换为哑变量/指示变量。所谓的哑变量&#xff0c;就是将分类变量的每一个不同的值转换为一个新的0/1变量。在输出的DataFrame中&#xff0c;每一列都以该值的名称命名 pandas.get_dummi…

java使用bouncycastle加解密

jdk默认带了一些常见的加解密方式&#xff0c;当我们常见的加解密不能满足时&#xff0c;就需要用到一些第三方的库了&#xff0c;bouncycastle就是其中一种。 但是bouncycastle文档比较少。简单介绍一下写法 1.导入依赖 <dependency><groupId>org.bouncycastle&…

5 ip的分配

如上一节所述&#xff0c;需要和其他设备通信&#xff0c;那么需要先配置ip. 1、如何配置ip 1.可以使用 ifconfig&#xff0c;也可以使用 ip addr 2.设置好了以后&#xff0c;用这两个命令&#xff0c;将网卡 up 一下&#xff0c;就可以了 //---------------------------- 使…

AI大模型时代网络安全攻防对抗升级,瑞数信息变革“下一代应用与数据安全”

AI与大模型技术加速普及&#xff0c;安全领域也在以创新视角聚焦下一代应用安全WAAP变革&#xff0c;拓展新一代数据安全领域。近日瑞数信息重磅发布了瑞数全新API扫描器、API安全审计、数据安全检测与应急响应系统及分布式数据库备份系统四大新品。此次发布在延续瑞数信息Bot自…

用java代码实现QQ第三方登录

QQ第三方登录需要使用到QQ互联开放平台提供的API&#xff0c;在Java中可以使用OAuth2.0协议来实现第三方登录。 具体实现步骤如下&#xff1a; 注册QQ互联开放平台账号&#xff0c;并创建应用&#xff0c;获取到App ID和App Secret。 在Java项目中导入QQ互联开放平台提供的Ja…

当zmq 和 docker 都要绑定一个端口时,怎么不修改端口号就能解决冲突?

问题描述 docker容器中的程序需要和外部进行通讯&#xff0c;但是当作为请求方向 响应方发送数据时&#xff0c;外部的进程因为需要绑定的端口被docker占用而绑定失败。 解决方式 方式一&#xff1a;使用请求响应方式&#xff0c;但是将响应端放置到容器内部。 方拾二&#…