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

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

2024-06-17 56
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在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
前端开发
数据库
关键词：
Django查询
Python查询
Python筛选
Python项目
Python Django
no怕不了木
目录
相关文章
疯狂的猿
|
19天前
|
Python
课程设计项目之基于Python实现围棋游戏代码
游戏进去默认为九路玩法，当然也可以选择十三路或是十九路玩法 使用pycharam打开项目，pip安装模块并引用，然后运行即可， 代码每行都有详细的注释，可以做课程设计或者毕业设计项目参考
疯狂的猿
59 33
bruce_xiaowei
|
1月前
|
SQL 存储 数据挖掘
使用Python和PDFPlumber进行简历筛选：以SQL技能为例
本文介绍了一种使用Python和`pdfplumber`库自动筛选简历的方法，特别是针对包含“SQL”技能的简历。通过环境准备、代码解析等步骤，实现从指定文件夹中筛选出含有“SQL”关键词的简历，并将其移动到新的文件夹中，提高招聘效率。
bruce_xiaowei
55 8
使用Python和PDFPlumber进行简历筛选：以SQL技能为例
土木林森
|
2月前
|
设计模式 前端开发 数据库
Python Web开发：Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用，涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容，并展示了实际代码示例，帮助读者快速掌握Django全栈开发的核心技术。
土木林森
232 45
小白学大数据
|
2月前
|
存储 数据可视化 数据挖掘
Python数据分析项目：抖音短视频达人粉丝增长趋势
Python数据分析项目：抖音短视频达人粉丝增长趋势
小白学大数据
70 1
dufadayang
|
2月前
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识？
如何在实际项目中应用Python Web开发的安全测试知识？
dufadayang
41 4
bruce_xiaowei
|
2月前
|
弹性计算 Linux iOS开发
Python 虚拟环境全解：轻松管理项目依赖
本文详细介绍了 Python 虚拟环境的概念、创建和使用方法，包括 `virtualenv` 和 `venv` 的使用，以及最佳实践和注意事项。通过虚拟环境，你可以轻松管理不同项目的依赖关系，避免版本冲突，提升开发效率。
bruce_xiaowei
162 3
土木林森
|
2月前
|
安全 数据库 开发者
Python Web开发：Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发，包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤，并通过示例代码展示了具体实现过程。
土木林森
85 2
龙大吉
|
2月前
|
安全 数据库 C++
Python Web框架比较：Django vs Flask vs Pyramid
Python Web框架比较：Django vs Flask vs Pyramid
龙大吉
56 1
yuanzhengme
|
3月前
|
JSON 搜索推荐 API
Python的web框架有哪些？小项目比较推荐哪个？
【10月更文挑战第15天】Python的web框架有哪些？小项目比较推荐哪个？
yuanzhengme
97 1
众所周知
|
3月前
|
安全 数据库 C++
Python Web框架比较：Django vs Flask vs Pyramid
Python Web框架比较：Django vs Flask vs Pyramid
众所周知
60 4

热门文章

最新文章

  • 1
    [python 技巧] 快速掌握Streamlit: python快速原型开发工具
  • 2
    农历节日倒计时：基于Python的公历与农历日期转换及节日查询小程序
  • 3
    10个必备Python调试技巧：从pdb到单元测试的开发效率提升指南
  • 4
    自动化微信朋友圈：Python脚本实现自动发布动态
  • 5
    使用 pyenv 来管理多个 Python 版本(2)
  • 6
    局域网屏幕监控系统中的Python数据结构与算法实现
  • 7
    Linux 安装python3.7.6
  • 8
    [oeasy]python053_学编程为什么从hello_world_开始
  • 9
    【Python】怎么解决：urllib.error.HTTPError: HTTP Error 403: Forbidden
  • 10
    让UE自动运行Python脚本：实现与实例解析
  • 1
    探索Python Django中的WebSocket集成：为前后端分离应用添加实时通信功能
    245
  • 2
    我将提供一个简化的Python代码示例和详解，以展示如何使用Python和Django框架来构建智能化小区综合物业管理系统的一部分功能。
    66
  • 3
    震惊！掌握Django/Flask后，我竟然轻松征服了所有Web项目难题！
    84
  • 4
    告别加班！Django/Flask高级技巧，让你的Web开发效率翻倍再翻倍！
    316
  • 5
    Django/Flask深度揭秘：揭秘那些让程序员爱不释手的神奇功能！
    46
  • 6
    为什么聪明人都选择Django/Flask？看完这篇，你也会有答案！
    89
  • 7
    从零到一，Django/Flask带你走进Web开发的梦幻世界！
    61
  • 8
    Django/Flask不只是框架，它们是你Web开发路上的超级英雄！
    40
  • 9
    深度剖析Django/Flask：解锁Web开发新姿势，让创意无限延伸！
    45
  • 10
    逆袭之路！Django/Flask助你成为Web开发界的璀璨新星！
    63

    • 相关课程

    更多
  • 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
  • msys2
    • 下一篇
    巧用对象存储回源绕过SSRF限制