Django 分页(表单)

django-ide


目录

    • 一、手动分页
    • 二、分页器分页


一、手动分页

1、概念

  • 页码:很容易理解,就是一本书的页码
  • 每页数量:就是一本书中某一页中的内容(数据量,比如第二页有15行内容),这 15 就是该页的数据量

每一页的数据量我们可以自定义,比如每页我们要求只显示 10 条数据。

2、功能

比如有数据:1, 2, 3, …, 100

假设我们规定:

页码(page)= 1

每一页(per_page)= 10

页码(page)数据范围(per_page)下标范围切片范围
11 ~ 100 ~ 9[ 0 : 10 ]
211 ~ 2010 ~ 19[ 10 : 20 ]
321 ~ 3020 ~ 39[ 20 : 30 ]
n[ (page-1) * per_page : page * per_page ]

3、案例

实现功能:根据数据量与我们规定的每页数据量自动创建页码按钮,当点击页面对应的页码按钮时,跳转到对应的页码数据。

先创建一百多个测试数据:

image-20230820171104141

  • 视图

    import math
    from App.models import *
    from django.shortcuts import render, HttpResponsedef paginate(request, page=1):# 页码:page# 每页数量:per_pageper_page = 10# 获取数据库PersonModel的所有表数据persons = PersonModel.objects.all()# 对获取的表数据切片操作persons = persons[(page-1) * per_page:page * per_page]# 总页数total = PersonModel.objects.count()        # 数据总条数total_page = math.ceil(total / per_page)   # 总页数(即总条数/每页条数)math.ceil向上取整,即返回大于或等于该数字的最小整数。如果传入的参数已经是整数,则返回该整数本身(如3.5则返回4(即大于3.5的数的最小整数),如7则返回7)。pages = range(1, total_page+1)   # 为什么要转换一下?因为传到模板的数据必须是一个字典,且字典的 values 必须是一个序列# 将切片的数据传入模板进行渲染return render(request, 'paginate.html', {'persons':persons, 'pages': pages})
    
  • 路由

    from django.contrib import admin
    from django.urls import path
    from App.views import *urlpatterns = [path('admin/', admin.site.urls),path('add/', add_person),path('del/', del_person),path('update/', update_person),path('get/', get_person),path('paginate/<int:page>/', paginate, name='paginate'),
    ]
  • 模板

    paginate.html

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>手动分页</title><style>ul {list-style: none;padding: 0;}.bts li {float: left;margin: 5px;}hr {clear: both;}</style>
    </head>
    <body><h2>手动分页功能</h2><hr><ul class="bts">{% for page in pages %}<li><a href="{% url 'paginate' page %}"><button>{{ page }}</button></a></li>{% endfor %}</ul><hr><ul>{% for person in persons %}<li>{{ person.name }} - {{ person.age }}</li>{% endfor %}</ul>
    </body>
    </html>
    
  • 验证

    当点击 15 这个页码按钮时,就会跳到数据的第 15 页的数据。

    image-20230820173413683

二、分页器分页

上面的分页是手动进行的,需要我们手动写功能。当然我们也可以使用 Django 中的分页器进行自动分页,使用时需导入 Paginator 模块。接下来,将使用分页器实现与手动分页功能完全一致的分页方法。

1、视图

import math
from App.models import *
from django.shortcuts import render, HttpResponse
from django.core.paginator import Paginatordef paginate2(request, page=1):# 每页数量per_page = 10all_date = PersonModel.objects.all()# 分页器对象paginator = Paginator(all_date, per_page)   # 获取所有用户数据,并根据每页显示10条用户数据进行分页persons = paginator.page(page)    # 获取指定page页的数据pages = paginator.page_range      # 页码范围,可进行循环遍历return render(request, 'paginate2.html', {'persons': persons, 'pages': pages})

2、路由

from django.contrib import admin
from django.urls import path
from App.views import *urlpatterns = [path('admin/', admin.site.urls),path('add/', add_person),path('del/', del_person),path('update/', update_person),path('get/', get_person),path('paginate/<int:page>/', paginate, name='paginate'),path('paginate2/<int:page>/', paginate2, name='paginate2'),
]

3、模板

paginate2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>手动分页</title><style>ul {list-style: none;padding: 0;}.bts li {float: left;margin: 5px;}hr {clear: both;}</style>
</head>
<body><h2>手动分页功能</h2><hr><ul class="bts">{% for page in pages %}<li><a href="{% url 'paginate2' page %}"><button>{{ page }}</button></a></li>{% endfor %}</ul><hr><ul>{% for person in persons %}<li>{{ person.name }} - {{ person.age }}</li>{% endfor %}</ul>
</body>
</html>

4、验证

http://127.0.0.1:8000/paginate2/10/

image-20230820181103256

—END

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

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

相关文章

C# 语法进阶 委托

1.委托 委托是一个引用类型&#xff0c;其实他是一个类&#xff0c;保存方法的指针 &#xff08;指针&#xff1a;保存一个变量的地址&#xff09;他指向一个方法&#xff0c;当我们调用委托的时候这个方法就立即被执行 关键字&#xff1a;delegate 运行结果&#xff1a; 思…

Vue Cli inspect

Vue Cli inspect vue-cli-service inspect&#xff1a;可以使用 vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config 使用方法&#xff1a; 1、输出在控制台&#xff1a;vue-cli-service inspect 2、输在在文件中&#xff1a;vue-cli-service inspect -->…

挑战Python100题(8)

100+ Python challenging programming exercises 8 Question 71 Please write a program which accepts basic mathematic expression from console and print the evaluation result. 请编写一个从控制台接受基本数学表达式的程序,并打印评估结果。 Example: If the follo…

LeetCode-轮转数组的三种方法(189)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 思路一&#xff1a; 建立一个两倍原数组长度的数组&#xff0c;然后其中保存两遍原数组中的元素&#xff0c;轮转的过程就可以看成是在这个新数组中截…

Nginx系列--rewrite的使用

原文网址&#xff1a;Nginx系列--rewrite的使用_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Nginx中rewrite的使用。 语法 rewrite regex URL [flag]; flag标志位 last&#xff1a;停止处理rewrite&#xff0c;并对配更改后的 URI 重新进行搜索&#xff08;再从 server 走一…

VMware 虚拟机 ubuntu 20.04 硬盘扩容方法

前言 最近由于需要编译 【RK3568】的 Linux SDK&#xff0c;发现 虚拟机默认的 200G 空间不足了&#xff0c;因此想增加这个 200G 空间的限制&#xff0c;通过网络上查找了一些方法&#xff0c;加上自己亲自验证&#xff0c;确认 硬盘扩容 正常&#xff0c;方法也比较的容易&a…

十五:爬虫-Scrapy-redis分布式

一&#xff1a;python操作redis 1.redis的安装与连接 安装 pip install redis 连接 r redis.StrictRedis(hostlocalhost,port6379,db0)2.redis数据类型相关操作 &#xff08;1&#xff09;字符串相关操作 import redis class TestString(object):# 初始化 连接redis数据库…

解决VMware 虚拟机 ubuntu 20.04 异常关闭导致虚拟网卡 ens33 无法工作问题

问题描述 由于经常使用 SSH 远程链接 VMware 中的虚拟机 ubuntu&#xff0c;每次关闭都是挂起&#xff0c;时间久了&#xff0c;虚拟机运行有些卡顿了&#xff0c;此时可以通过 Linux 命令重启或者关闭 ubuntu&#xff0c;也可以之间使用 VMWare 中的【虚拟机】-- 【电源】-&g…

HPM6750开发笔记《GPIO例程深度解析》

目录 创建工程&#xff1a; 代码分析&#xff1a; 1.头文件包含&#xff1a; 2.宏定义&#xff1a; 3.中断服务程序&#xff08;ISR&#xff09;&#xff1a; 清除中断标志&#xff1a; 处理 LED 状态切换&#xff1a; 处理用户按键状态&#xff1a; 处理其他情况&…

WPF+Halcon 培训项目实战(11):HS组件封装

文章目录 前言相关链接项目专栏运行环境匹配图片封装组件新增类库项目选择依赖顺序并添加Nuget修改原本矩形方法运行结果&#xff1a; 对矩形进行抽象封装抽象基类矩形抽象改造 圆形抽象封装代码运行结果 前言 为了更好地去学习WPFHalcon&#xff0c;我决定去报个班学一下。原…

基于Rangenet Lib的自动驾驶LiDAR点云语义分割与可视化

这段代码是一个C程序&#xff0c;用于处理来自KITTI数据集的激光雷达&#xff08;LiDAR&#xff09;扫描数据。程序主要实现以下功能&#xff1a; 1. **读取和解析命令行参数**&#xff1a;使用Boost库中的program_options模块来定义和解析命令行参数。这包括扫描文件路径、模型…

计算机毕业设计 基于SSM的果蔬作物疾病防治系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…