AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Python Django项目下的分页和筛选查询

2024-06-17 39
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在Django中实现分页功能，视图函数通过`Paginator`处理数据，每页显示10条记录。URL配置支持带参数和不带参数的分页请求。前端模板使用for循环展示分页数据，包括商品信息和状态按钮，并利用分页组件导航。筛选查询视图根据GET请求的`state`参数过滤上架或下架产品，同样实现分页功能。前端添加状态选择下拉框，分页链接携带查询参数`state`确保筛选状态在翻页时保持。

分页

当我们的数据过多是，我们需要对数据进行分页，即每页显示多少行，有多少页，好在Django已经为我们准备好了，直接套用即可

视图函数

下方我是将三个数据表中的数据合在一起，准备渲染到界面，

注意：三个数据表中需要有一个可以分辨其实不同数据表的字段，方便我们在前端分别渲染

我们给一个page参数，默认是1

def allprodect(request,page = 1):
    # 获取cookie中的usid值，不存在则默认0
    usid = request.COOKIES.get('usid', 0)
    # 查询数据库中是否存在用户
    user = UserMondel.objects.filter(id=usid).first()
    # 如果usid等于0,则代表用户不存在，则需定位到登录页
    if usid == 0:
        return redirect(reverse('login'))
    per_page = 10
    injection = injection_machine.objects.filter().all()
    machining = machining_machine.objects.filter().all()
    robots = robot.objects.filter().all()
    allinfo  = list(injection) + list(machining) + list(robots)
    # 分页器
    paginator = Paginator(allinfo, per_page)
    # 获取第几页數據
    injection_page = paginator.page(page)
    # 页码范围，可以遍历
    pages = paginator.page_range
    return render(request, 'allprodect.html',
                  {
   'injection_page': injection_page, 'pages': pages, 'pageone': page, 'user': user})

URL

在URL当中设置带参请求和不带参两个请求

path('allprodect/<int:page>',allprodect,name='allprodect'),
path('allprodect/',allprodect,name='allprodect'),

前端

使用for循环对其进行渲染，我这边因为三个数据库中显示的字段都是一样的，所以可以放在一起，如果你的是不同的，则需要分别不同渲染

{% for inject in injection_page %}
        {% csrf_token %}
            <div class="row mb-3 custom-card col-md-8 custom-card-hover"> <!-- 添加 custom-card-hover 类 -->
                <a href="#" class="text-decoration-none col-md-10 d-flex">
                <!-- 图片区域在左边 -->
                <div class="col-md-4">
                    <img src="{
  { inject.photo.url }}" alt="图片" class="custom-img" style="height: 120px;width:auto;max-width: 100%;object-fit: contain">
                </div>
                <!-- 文字数据区域 -->
                <div class="col-md-8">
                    <!-- 左边参数 -->
                    <div class="row">
                        <div class="col-md-6">
                            <ul>
                                {% if inject.classify is null %}
                                    <li>類別：{
  { inject.classifys }}</li>
                                {% else %}
                                    <li>類別：{
  { inject.classify }}</li>
                                {% endif %}

                                <li>品牌：{
  { inject.brand }}</li>
                                <li>型号：{
  { inject.model }}</li>
                                <li>年份：{
  { inject.year }}</li>
                            </ul>
                        </div>
                        <!-- 右边参数 -->
                        <div class="col-md-6">

                            <ul>
                                {% if inject.is_Shelves == 1%}
                                    <li>状态：上架</li>
                                {% else %}
                                    <li>状态：下架</li>
                                {% endif %}
                            </ul>
                        </div>

                    </div>
                </div>
                </a>
            <!-- 按钮区域 -->
            <div class="col-md-2 d-flex align-items-center">
                {% if inject.classify is null %}
                    <button type="button" class="btn btn-success mx-1" onclick="prodectshelves('{
  { inject.id }}','{
  { inject.classifys }}','{
  { user.id }}')">上架</button>
{#                                    <li>類別：{
  { inject.classifys }}</li>#}
                                {% else %}
{#                                    <li>類別：{
  { inject.classify }}</li>#}
                    <button type="button" class="btn btn-success mx-1" onclick="prodectshelves('{
  { inject.id }}','{
  { inject.classify }}','{
  { user.id }}')">上架</button>
                                {% endif %}

                {% if inject.classify is null %}
                    <button type="button" class="btn btn-danger mx-1" onclick="prodectshelvesunder('{
  { inject.id }}','{
  { inject.classifys }}','{
  { inject.id }}')">下架</button>
                                    {% else %}
    {#                                    <li>類別：{
  { inject.classify }}</li>#}
                    <button type="button" class="btn btn-danger mx-1" onclick="prodectshelvesunder('{
  { inject.id }}','{
  { inject.classify }}','{
  { inject.id }}')">下架</button>
                                    {% endif %}


            </div>
            </div>


        <hr>
    {% endfor %}

分页组件

injection_page.previous_page_number中的previous_page_number会获取当前页面的上一页

injection_page.next_page_number中的next_page_number会获取当前页面的下一页

pages是数据所有的页面，可以进行循环并显示

<!-- 分页组件 -->
<nav aria-label="Page navigation example">
    <ul class="pagination">
    {% if injection_page.has_previous %}
        <li class="page-item"><a class="page-link" href="{% url 'allprodect' injection_page.previous_page_number %}">上一页</a></li>
    {% endif %}
    {% for page in pages %}
        <li class="page-item"><a class="page-link" href="{% url 'allprodect' page %}">{
  { page }}</a></li>
    {% endfor %}
    {% if injection_page.has_next %}
        <li class="page-item"><a class="page-link" href="{% url 'allprodect' injection_page.next_page_number%}">下一页</a></li>
    {% endif %
    </ul>
</nav>

筛选查询

目前有一个筛选查询的需求，可以查询已上架和下架的产品，并且如果数据过多，以分页的页面进行展示

视图函数

在这个视图函数中，我们首先判断其实GET请求，并在GET请求中获取来自前端页面的state参数值，以此来查询上架和未上架的产品，数据库字段使用的是布尔值，也就是1和0,故咋前端页面传值是只需要传1或者0 即可查询不同的值数据，

因为筛选的是三个数据表中的数据，故需要对其进行数据合并，然后传送至前端进行渲染显示

def Searchstate(request,page = 1):
    # 获取cookie中的usid值，不存在则默认0
    usid = request.COOKIES.get('usid', 0)
    # 查询数据库中是否存在用户
    user = UserMondel.objects.filter(id=usid).first()
    # 如果usid等于0,则代表用户不存在，则需定位到登录页
    if usid == 0:
        return redirect(reverse('login'))
    if request.method == 'GET':
        state = request.GET.get("state")
        per_page = 5
        injection = injection_machine.objects.filter(is_Shelves=state).all()
        machining = machining_machine.objects.filter(is_Shelves=state).all()
        robots = robot.objects.filter(is_Shelves=state).all()
        allinfo = list(injection) + list(machining) + list(robots)
        # 分页器
        paginator = Paginator(allinfo, per_page)
        # 获取第几页數據
        injection_page = paginator.page(page)
        # 页码范围，可以遍历
        pages = paginator.page_range
        return render(request, 'Searchstate.html',
                      {
   'injection_page': injection_page, 'pages': pages, 'pageone': page, 'user': user})

URL

带参进行分页时使用，不带参正常请求

path('Searchstate/<int:page>',Searchstate,name='Searchstate'),
path('Searchstate/',Searchstate,name='Searchstate'),

前端

注意：在下面代码中，form表单中，提交的地址是：{% url 'Searchstate' 1%}给路径一个默认值是1，方式是GET，提交ID是state的值，

<div class="container mt-4"> <!-- 添加 mt-4 类来设置顶部间隙 -->
    <hr>
<form method="get" action="{% url 'Searchstate' 1%}" class="form-inline align-items-end"> <!-- 添加 align-items-end 类 -->
        <div class="form-group mb-2 mr-2">
            <label for="state">狀態：</label>
            <select id="state" name="state" class="form-control">
                <option value="1">上架</option>
                <option value="0">下架</option>
                <!-- 添加更多选项 -->
            </select>
        </div>
    <div class="form-group mb-2">
            <button type="submit" class="btn btn-primary">搜索</button>
        </div>
</form>
    {% for inject in injection_page %}
            <div class="row mb-3 custom-card col-md-8 custom-card-hover"> <!-- 添加 custom-card-hover 类 -->
                <a href="#" class="text-decoration-none col-md-10 d-flex">
                <!-- 图片区域在左边 -->
                <div class="col-md-4">
                    <img src="{
    { inject.photo.url }}" alt="图片" class="custom-img" style="height: 120px;width:auto;max-width: 100%;object-fit: contain">
                </div>
                <!-- 文字数据区域 -->
                <div class="col-md-8">
                    <!-- 左边参数 -->
                    <div class="row">
                        <div class="col-md-6">
                            <ul>
                                {% if inject.classify is null %}
                                    <li>類別：{
  { inject.classifys }}</li>
                                {% else %}
                                    <li>類別：{
  { inject.classify }}</li>
                                {% endif %} 

                                <li>品牌：{
  { inject.brand }}</li>
                                <li>型号：{
  { inject.model }}</li>
                                <li>年份：{
  { inject.year }}</li>
                            </ul>
                        </div>
                        <!-- 右边参数 -->
                        <div class="col-md-6">

                            <ul>
                                {% if inject.is_Shelves == 1%}
                                    <li>状态：上架</li>
                                {% else %}
                                    <li>状态：下架</li>
                                {% endif %}
                            </ul>
                        </div>

                    </div>
                </div>
                </a>
            <!-- 按钮区域 -->
            <div class="col-md-2 d-flex align-items-center">
                {% if inject.classify is null %}
                    <button type="button" class="btn btn-success mx-1" onclick="searchprodectshelves('{
    { inject.id }}','{
    { inject.classifys }}','{
    { user.id }}')">上架</button>
{#                                    <li>類別：{
  { inject.classifys }}</li>#}
                                {% else %}
{#                                    <li>類別：{
  { inject.classify }}</li>#}
                    <button type="button" class="btn btn-success mx-1" onclick="searchprodectshelves('{
    { inject.id }}','{
    { inject.classify }}','{
    { user.id }}')">上架</button>
                                {% endif %}

                {% if inject.classify is null %}
                    <button type="button" class="btn btn-danger mx-1" onclick="searchprodectshelvesunder('{
    { inject.id }}','{
    { inject.classifys }}','{
    { inject.id }}')">下架</button>
                                    {% else %}
    {#                                    <li>類別：{
  { inject.classify }}</li>#}
                    <button type="button" class="btn btn-danger mx-1" onclick="searchprodectshelvesunder('{
    { inject.id }}','{
    { inject.classify }}','{
    { inject.id }}')">下架</button>
                                    {% endif %}


            </div>
            </div>
        <hr>
    {% endfor %}
</div>

点击搜索后，地址是：http://127.0.0.1:8000/Searchstate/?state=1

因为我们的数据有多个，还需要进行分页，故在分页组件中要特别指定?state={ { request.GET.state }}会将ＧＥＴ请求的参数带上查询，

如第第二页就是：http://127.0.0.1:8000/Searchstate/2?state=1

<!-- 分页组件 -->
<nav aria-label="Page navigation example">
    <ul class="pagination">
    {% if injection_page.has_previous %}
        <li class="page-item"><a class="page-link" href="{% url 'Searchstate' injection_page.previous_page_number %}?state={
    { request.GET.state }}">上一页</a></li>
    {% endif %} 

    {% for page in pages %}
        <li class="page-item"><a class="page-link" href="{% url 'Searchstate' page %}?state={
    { request.GET.state }}">{
  { page }}</a></li>
    {% endfor %}

    {% if injection_page.has_next %}
        <li class="page-item"><a class="page-link" href="{% url 'Searchstate' injection_page.next_page_number%}?state={
    { request.GET.state }}">下一页</a></li>
    {% endif %} 

    </ul>
</nav>

总结：

分页比较简单，基本上有官网文档即可操作上手，但在进行筛选分页时耗了一点时间，记录一下，下次少走弯路

文章标签：
Python
前端开发
数据库
关键词：
Python查询
Python项目
Python Django
Django查询
Django项目
no怕不了木
目录
相关文章
跃@sir
|
1月前
|
机器学习/深度学习 数据采集 数据可视化
Python 数据分析：从零开始构建你的数据科学项目
【10月更文挑战第9天】Python 数据分析：从零开始构建你的数据科学项目
跃@sir
56 2
土木林森
|
20天前
|
设计模式 前端开发 数据库
Python Web开发：Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用，涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容，并展示了实际代码示例，帮助读者快速掌握Django全栈开发的核心技术。
土木林森
113 45
bruce刘晓伟-18435
|
19天前
|
弹性计算 Linux iOS开发
Python 虚拟环境全解：轻松管理项目依赖
本文详细介绍了 Python 虚拟环境的概念、创建和使用方法，包括 `virtualenv` 和 `venv` 的使用，以及最佳实践和注意事项。通过虚拟环境，你可以轻松管理不同项目的依赖关系，避免版本冲突，提升开发效率。
bruce刘晓伟-18435
47 3
土木林森
|
21天前
|
安全 数据库 开发者
Python Web开发：Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发，包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤，并通过示例代码展示了具体实现过程。
土木林森
33 2
龙大吉
|
24天前
|
安全 数据库 C++
Python Web框架比较：Django vs Flask vs Pyramid
Python Web框架比较：Django vs Flask vs Pyramid
龙大吉
32 1
yuanzhengme
|
1月前
|
JSON 搜索推荐 API
Python的web框架有哪些？小项目比较推荐哪个？
【10月更文挑战第15天】Python的web框架有哪些？小项目比较推荐哪个？
yuanzhengme
53 1
众所周知
|
1月前
|
安全 数据库 C++
Python Web框架比较：Django vs Flask vs Pyramid
Python Web框架比较：Django vs Flask vs Pyramid
众所周知
27 4
龙大吉
|
1月前
|
安全 数据库 C++
Python Web框架比较：Django vs Flask vs Pyramid
【10月更文挑战第10天】本文比较了Python中三个最受欢迎的Web框架：Django、Flask和Pyramid。Django以功能全面、文档完善著称，适合快速开发；Flask轻量灵活，易于上手；Pyramid介于两者之间，兼顾灵活性和安全性。选择框架时需考虑项目需求和个人偏好。
龙大吉
35 1
龙大吉
|
1月前
|
安全 数据库 C++
Python Web框架比较：Django vs Flask vs Pyramid
【10月更文挑战第6天】本文比较了Python中三个最受欢迎的Web框架：Django、Flask和Pyramid。Django功能全面，适合快速开发；Flask灵活轻量，易于上手；Pyramid介于两者之间，兼顾灵活性和可扩展性。文章分析了各框架的优缺点，帮助开发者根据项目需求和个人偏好做出合适的选择。
龙大吉
35 4
子午s
|
1月前
|
机器学习/深度学习 人工智能 算法
【玉米病害识别】Python+卷积神经网络算法+人工智能+深度学习+计算机课设项目+TensorFlow+模型训练
玉米病害识别系统，本系统使用Python作为主要开发语言，通过收集了8种常见的玉米叶部病害图片数据集（'矮花叶病', '健康', '灰斑病一般', '灰斑病严重', '锈病一般', '锈病严重', '叶斑病一般', '叶斑病严重'），然后基于TensorFlow搭建卷积神经网络算法模型，通过对数据集进行多轮迭代训练，最后得到一个识别精度较高的模型文件。再使用Django搭建Web网页操作平台，实现用户上传一张玉米病害图片识别其名称。
子午s
56 0
【玉米病害识别】Python+卷积神经网络算法+人工智能+深度学习+计算机课设项目+TensorFlow+模型训练

热门文章

最新文章

  • 1
    手把手教你用Python实践深度学习
  • 2
    3、Python与设计模式--建造者模式
  • 3
    Python输出当前代码信息：文件，行号，函数名
  • 4
    Python爬虫系列1-通过requests Payload方式抓取掘金数据
  • 5
    Python基础教程笔记——条件，循环和其他语句
  • 6
    python对比配置文件差异
  • 7
    Python中参数多个值的表示法
  • 8
    Python自动化：根据模板批量生成含指定数据的word文档
  • 9
    Python编程：elasticsearch库操作Elasticsearch
  • 10
    Python网络编程1--笔记
  • 1
    Django/Flask深度揭秘：揭秘那些让程序员爱不释手的神奇功能！
    38
  • 2
    为什么聪明人都选择Django/Flask？看完这篇，你也会有答案！
    72
  • 3
    从零到一，Django/Flask带你走进Web开发的梦幻世界！
    54
  • 4
    Django/Flask不只是框架，它们是你Web开发路上的超级英雄！
    36
  • 5
    深度剖析Django/Flask：解锁Web开发新姿势，让创意无限延伸！
    39
  • 6
    逆袭之路！Django/Flask助你成为Web开发界的璀璨新星！
    50
  • 7
    告别迷茫，Django/Flask深入应用指南，让你的Web梦想照进现实！
    51
  • 8
    从菜鸟到大神，Django/Flask 让你秒变 Web 开发界的‘头号玩家’！
    57
  • 9
    Django使用django-apscheduler实现定时任务
    465
  • 10
    Django项目同时连接多个不同的数据库(7)
    189

    • 相关课程

    更多
  • Python Web开发基础
  • Python开发基础入门
  • Python常用数据科学库
  • Python网络爬虫实战
  • Python完全自学手册图文教程
  • Python基础快速入门实战教程

    • 相关电子书

    更多
  • From Python Scikit-Learn to Sc
  • Data Pre-Processing in Python:
  • 双剑合璧-Python和大数据计算平台的结合

    • 相关实验场景

    更多
  • 用Python画圣诞树
  • Python选择及循环结构
  • 云端Python及基本操作
  • Python网络通信程序典型应用
  • Python新手入门（Anolis OS）
  • 零基础部署一个Django Blog到Serverless架构

    • 推荐镜像

    更多
  • python-release
  • nodejs-release
  • golang
    • 下一篇
    无影云桌面