66.Python-web框架-Django-免费模板django-datta-able的分页的一种方式

news2024/12/26 8:02:07

目录

1.方案介绍

1.1实现效果

1.2django.core.paginator

Paginator 类:

Page 类:

EmptyPage 和 PageNotAnInteger 异常:

1.3 templatetags

2.方案步骤

2.1创建一个common app

2.2创建plugins/_pagination.html

2.3 其他app的views.py查询方法

2.4在AIRecords.html里使用分页

1.方案介绍

1.1实现效果

实现方案中使用到：

1.2django.core.paginator

        django.core.paginator 是 Django 框架中的一个模块，用于实现数据分页功能。这个模块提供了几个关键类和方法，帮助开发者轻松地在视图中对查询结果进行分页处理，从而在前端展示时能够更加高效和用户友好。下面是 django.core.paginator 中主要组件的简介：

  • Paginator 类:

用途: 主要用于将查询结果集分割成多页。
参数:
object_list: 需要分页的对象列表，通常是数据库查询的结果。
per_page: 每页显示的对象数量，默认为10。
方法:
.count: 返回总对象数。
.num_pages: 返回总页数。
.page(number): 返回指定页号的 Page 对象。
.page_range: 返回一个表示所有页号的范围对象。

  • Page 类:

        用途: 表示分页后的单页数据，包含当前页的数据列表和一些分页信息。
        属性:
                number: 当前页的页码。
                object_list: 当前页的数据列表。
                has_next: 是否有下一页。
                has_previous: 是否有上一页。
                next_page_number: 下一页的页码，如果没有则为None。
                previous_page_number: 上一页的页码，如果没有则为None。
        方法:
                .start_index(): 返回当前页第一条记录的索引位置（从1开始）。
                .end_index(): 返回当前页最后一条记录的索引位置（从1开始）。

  • EmptyPage 和 PageNotAnInteger 异常:

        当请求的页码无效时，如请求的页码不是一个整数或超过了实际的页数，Paginator 在调用 .page() 方法时会抛出这些异常。

1.3 templatetags

         在Django中，templatetags 是一个特殊的目录，位于应用的目录下，用于存放自定义的模板标签和过滤器。通过自定义模板标签和过滤器，开发者可以扩展Django模板系统的功能，使其更加灵活和强大。

2.方案步骤

2.1创建一个common app

考虑到分页是一个通用的功能，所以创建了一个common app。

在此common app下创建文件夹 templatetags

在templatetags下创建general_tags.py

代码如下：

from django import template

register = template.Library()

@register.inclusion_tag('plugins/_pagination.html', takes_context=True)
def show_pagination(context):
    print(context)
    return {
        'page_objects':context.dicts[3]['aiRecords'],
        'search':'',
        'orderby':'',}

  • 'page_objects':context.dicts[3]['aiRecords'],//这句冒号后面的部分，需要根据查询数据的views里的代码具体的更改，后面会写到views.py里的代码。
  • 'search':'',//这句准备在页面跳转时，带着搜索条件，可以删减

  • 'orderby':''//这句准备在页面跳转时，带着排序字段，可以删减

2.2创建plugins/_pagination.html

        在template目录创建文件夹plugins

        在plugins下创建_pagination.html


<ul class="pagination m-auto">

    {% if page_objects.has_previous %}
        <li class="page-item "><a href="?page=1&orderby={{ orderby }}&search={{ search }}"><span class="page-link"><i class="fa fa-chevron-left" aria-hidden="true"></i>&nbsp;首页</span></a></li>
    {% else %}
        <li class="page-item disabled"><a href=""><span class="page-link">首页</span></a></li>
    {% endif %}
    
        
    {% if page_objects.number|add:'-4' > 1 %}
        <li class ="page-item"><a class="page-link" href="?page={{ page_objects.number|add:'-5' }}&orderby={{ orderby }}&search={{ search }}">&hellip;</a></li>
    {% endif %}
        
    {% for i in page_objects.paginator.page_range %}
        {% if page_objects.number == i %}
                <li class="page-item active"><a class="page-link" href=""> {{i}}</a></li>
        {% elif i > page_objects.number|add:'-5' and i < page_objects.number|add:'5' %}
            <li class ="page-item" ><a class="page-link" href="?page={{ i }}&orderby={{ orderby }}&search={{ search }}">{{ i }}</a></li>
        {% endif %}
    {% endfor %}
        
    {% if page_objects.paginator.num_pages > page_objects.number|add:'4' %}
        <li class ="page-item"><a class="page-link" href="?page={{ page_objects.number|add:'5' }}&orderby={{ orderby }}&search={{ search }}">&hellip;</a></li>
    {% endif %}
    
    {% if page_objects.has_next %}

        <li class ="page-item" ><a class="page-link" href="?page={{ page_objects.paginator.num_pages }}&orderby={{ order }}&search={{ search }}">尾页&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
    {% else %}
        <li class="page-item disabled"><a href=""><span class="page-link">尾页</span></a></li>
    {% endif %}
        
</ul>

2.3 其他app的views.py查询方法

看注释就好

from django.shortcuts import render
from django.shortcuts import render, redirect
from aivrs import models
from django.core.paginator import Paginator

# Create your views here.
# 定义每页显示的记录数
PAGINATOR_NUMBER = 2
def AIRecords(request):
    """
    处理AI记录的列表页面请求。

    参数:
    - request: Django的HttpRequest对象，包含请求的信息。

    返回:
    - 返回一个渲染后的AI记录列表页面。
    """
    # 获取所有AI记录并按ID排序
    aiRecords = models.AIRecords.objects.all().order_by('id')
    # 计算记录总数
    count_total = aiRecords.count()
    # 初始化分页器，每页显示PAGINATOR_NUMBER条记录
    paginator = Paginator(aiRecords, PAGINATOR_NUMBER)
    # 从请求中获取当前页码
    page = request.GET.get('page')
    # 如果页码不存在，则默认为第1页
    if page is None:
        page = 1
    # 获取指定页码的记录
    aiRecords = paginator.get_page(page)

    # 渲染并返回AI记录列表页面
    return render(request, 'AIRecords.html', {'aiRecords': aiRecords})

2.4在AIRecords.html里使用分页

  • {% load general_tags %}

        这一行代码是Django模板语言中的标签，用于在模板文件中加载自定义的模板标签库。general_tags是你自定义的标签库名称，意味着在这个模板文件中，你可以使用general_tags库中定义的所有自定义模板标签和过滤器。

  • {% show_pagination %}

        在Django模板中，{% show_pagination %}这一行代码是一个自定义模板标签的用法。这个标签是之前通过{% load general_tags %}加载的general_tags库中定义的一个标签，用于展示分页导航。 

具体代码如下：

{% extends "layouts/base.html" %}
{% load general_tags %}

{% block title %} Management {% endblock %} 

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<div class="pcoded-content">
    <div class="pcoded-inner-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <div class="page-header-title">
                            <h5 class="m-b-10">AIRecords Management</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- [ breadcrumb ] end -->
        <div class="main-body">
            <div class="page-wrapper">
                <!-- [ Main Content ] start -->
                <div class="row">
                    <!-- [ basic-table ] start -->
                    <div class="col-xl-12">
                        <div class="card">
                            <div class="card-header">
                                <h5>Total {{aiRecords.paginator.count}} records</h5>
                            </div>



                            <div class="card-block">
                                <div class='row'>
   
                                    <div class="col-4">
                                        <form class="form-inline mb-2">
                                            <div class="form-group mx-sm-3 mb-2">
                                                <input type="text" 
                                                       class="form-control" 
                                                       name="search",
                                                       id='search',
                                                       placeholder="Search title / author",
                                                       value={{search}}
                                                       >
                                            </div>
                                            <button type="submit" class="btn btn-secondary mb-2 btn-sm">Search</button>
                                        </form>
                                    </div>
                                </div>

                                <div class="table-responsive ">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Ext ID</th>
                                                <th>Image Name</th>
                                                <th>Image Path</th>
                                                <th>Image Url</th>
                                                <th>OCR Status</th>
                                                <th>OCR Message</th>
                                                <th>OCR Time</th>
                                                <th>Location</th>
                                                <th>extServiceSystem</th>
                                                <th>serviceName</th>
                                                <th>serviceAccessedStatus</th>
                                                <th>serviceAccessedMessage</th>
                                                <th>serviceAccessedTime</th>
                                                <th>Operation</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            
                                            {% for airecord in aiRecords %}
                                            <tr>
                                                <th scope="row">{{airecord.id}}</th>
                                                <td>{{airecord.extId}}</td>
                                                <td>{{airecord.imageName}}</td>
                                                <td>{{airecord.imagePath}}</td>
                                                <td>{{airecord.imageUrl}}</td>
                                                <td>{{airecord.ocrStatus}}  </td>
                                                <td>{{airecord.ocrMessage}}  </td>
                                                <td>{{airecord.ocrTime|date:"Y/m/d H:i" }}</td>
                                                <td>{{airecord.ocrLocation}}</td>
                                                <td>{{airecord.extServiceSystem}}</td>
                                                <td>{{airecord.serviceName}}</td>
                                                <td>{{airecord.serviceAccessedStatus}}  </td>
                                                <td>{{airecord.serviceAccessedMessage}}  </td>
                                                <td>{{airecord.serviceAccessedTime|date:"Y/m/d H:i" }}</td>
                                                <td>                                
{#                                                    <a href="{% url 'book_detail' airecord.id%}" class="badge badge-warning"><i class="feather icon-eye"></i></a>#}
{#                                                    <a href="{% url 'book_update' airecord.id%}" class="badge badge-info"><i class="feather icon-edit"></i>&nbsp;Update</a>&nbsp;#}
{#                                                    <a href="{% url 'book_delete' airecord.id%}" class="badge badge-danger"><i class="feather icon-trash-2"></i>&nbsp;Delete</a>&nbsp;#}
                                                </td>

                                            </tr>
                                            {% endfor %}


                                        </tbody>
                                    </table>
                                </div>
                                <div class="row">
                                    <div class='col-4'>
{#                                        <a href="{% url 'book_create' %}" class='btn btn-primary'>Add book</a>#}
                                    </div>
                                    <div class='col-8'>
                                        {% show_pagination %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

{% block javascripts %}{% endblock javascripts %}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

springboot旅游管理系统-计算机毕业设计源码16021

springboot旅游管理系统-计算机毕业设计源码16021

摘 要 本文旨在设计和实现一个基于Spring Boot框架的旅游管理系统。该系统通过利用Spring Boot的快速开发特性和丰富的生态系统&#xff0c;提供了一个高效、可靠和灵活的解决方案。系统将实现旅游景点信息的管理、线路规划、跟团游玩、旅游攻略、酒店信息管理、订单管理和用户…
阅读更多...
html+css+js文章模板

html+css+js文章模板

图片 源代码在图片后面&#xff0c;点赞加关注&#xff0c;谢谢&#x1f604; 源代码 <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width,…
阅读更多...
JSP实现简单的登录和注册

JSP实现简单的登录和注册

JSP实现登录和注册&#xff08;Map集合模拟数据库&#xff09; 1、login.jsp2、 loginSelect.jsp3、register.jsp4、 RegisterSelect.jsp5、 index.jsp 1、login.jsp login.jsp中username和password在LoginSelect.jsp验证是否一致使用session.setAttribute("login_msg&quo…
阅读更多...
Android Studio初学者实例：ContentProvider读取手机通讯录

Android Studio初学者实例：ContentProvider读取手机通讯录

该实验是通过ContentProvider读取手机通讯录 知识点包含了RecyclerView控件、UriMatcher、ContentResolver 先看效果&#xff0c;显示手机通讯录 首先是界面的布局代码 activity_main59.xml <?xml version"1.0" encoding"utf-8"?> <LinearL…
阅读更多...
[译]Reactjs性能篇

[译]Reactjs性能篇

英文有限&#xff0c;技术一般&#xff0c;海涵海涵&#xff0c;由于不是翻译出身&#xff0c;所以存在大量的瞎胡乱翻译的情况&#xff0c;信不过我的&#xff0c;请看原文&#xff5e;&#xff5e; 原文地址&#xff1a;https://facebook.github.io/react/docs/advanced-per…
阅读更多...
不同操作系统下的换行符

不同操作系统下的换行符

1. 关键字2. 换行符的比较3. ASCII码4. 修改换行符 4.1. VSCode 5. 参考文档 1. 关键字 CR LF CRLF 换行符 2. 换行符的比较 英文全称英文缩写中文含义转义字符ASCII码值操作系统Carriage ReturnCR回车\r13MacIntosh&#xff08;早期的Mac&#xff09;LinefeedLF换行/新行\…
阅读更多...
Qt Q_ASSERT详解

Qt Q_ASSERT详解

Q_ASSERT详解 引言一、基本用法二、深入了解三、参考链接 引言 Q_ASSERT是 Qt 框架中的一个宏&#xff0c;用于在调试时检查某个条件是否为真。它是程序调试中的一个重要工具&#xff0c;有助于开发者在开发过程中及时发现并修复潜在的错误。 一、基本用法 只在使用 Qt 的 D…
阅读更多...
暑期大数据人工智能学习-企业项目试岗实训开营

暑期大数据人工智能学习-企业项目试岗实训开营

暑期企业项目-试岗实训活动全面开启啦 跟张良均老师学大数据人工智能 不仅可以提供实习证明&#xff0c;有需要话也可以提供实习鉴定报告 √54个热门案例拆解 √40项目实战课程 √27个项目可选 √4个项目方向
阅读更多...
数据提取的奥秘

数据提取的奥秘

在数字化时代&#xff0c;数据提取作为连接原始数据与知识发现的桥梁&#xff0c;其重要性不言而喻。它不仅是数据分析和数据治理的基石&#xff0c;更是企业决策和业务优化的关键。以下是数据提取奥秘的详细解析&#xff1a; 一、数据提取的定义与意义 定义&#xff1a;数据…
阅读更多...
怎样保存python文件

怎样保存python文件

按下“CtrlS”键即可快速保存Python文件。 或者点击“File”&#xff0c;在下拉菜单中选择“Save”。 打开后我们就会看到这样的一个页面窗口了。 我们还能在这里进行路径的保存位置的查找。 然后在这里选择文件类型&#xff0c;并输入文件名。 接下来我们点击保存就可以完成操…
阅读更多...
PyCharm远程开发配置（2024以下版本）

PyCharm远程开发配置（2024以下版本）

目录 PyCharm远程开发配置 1、清理远程环境 1.1 点击Setting 1.2 进入Interpreter 1.3 删除远程环境 1.4 删除SSH 2、连接远程环境 2.1 点击Close Project 2.2 点击New Project 2.3 项目路径设置 2.4 SSH配置 2.5 选择python3解释器在远程环境的位置 2.6 配置远程…
阅读更多...
AI Agent当牛做马，办公自动化带来超级生产力｜对话Laplace

AI Agent当牛做马，办公自动化带来超级生产力｜对话Laplace

成立仅9个月的AI初创公司拉普拉斯智能&#xff08;Laplace AI&#xff09;&#xff0c;已经用原生智能生产力操作平台帮助企业用户实现智能体落地了&#xff01; 平台名为拉普拉斯智能实验室&#xff08;Laplace AI Lab&#xff09;&#xff0c;入口统一&#xff0c;用自然语言…
阅读更多...
2024-2025年本田维修电路图线路图接线图资料更新

2024-2025年本田维修电路图线路图接线图资料更新

此次更新了2024-2025年本田车系电路图资料&#xff0c;覆盖市面上99%车型&#xff0c;包括维修手册、电路图、新车特征、车身钣金维修数据、全车拆装、扭力、发动机大修、发动机正时、保养、电路图、针脚定义、模块传感器、保险丝盒图解对照表位置等等&#xff01; 汽修帮手汽…
阅读更多...
小迪安全v2023 javaWeb项目

小迪安全v2023 javaWeb项目

小迪安全v2023 javaWeb项目 大体上跟随小迪安全的课程&#xff0c;本意是记录自己的学习历程&#xff0c;不能说是完全原创吧&#xff0c;大家可以关注一下小迪安全&#xff0c;他讲的挺好的。 若有冒犯&#xff0c;麻烦私信移除。 已获得迪の认可&#xff0c;哈哈 文章目录…
阅读更多...
【Spring Boot】关系映射开发（一）：一对一映射

【Spring Boot】关系映射开发（一）：一对一映射

关系映射开发&#xff08;一&#xff09;&#xff1a;一对一映射 1.认识实体间关系映射1.1 映射方向1.2 ORM 映射类型 2.实现 “一对一” 映射2.1 编写实体2.1.1 新建 Student 实体2.1.2 新建 Card 实体 2.2 编写 Repository 层2.2.1 编写 Student 实体的 Repository2.2.2 编写…
阅读更多...
轮换IP是什么？——深入了解轮换IP的特点

轮换IP是什么？——深入了解轮换IP的特点

大家在日常上网时&#xff0c;可能听说过“轮换IP”这个词。那么&#xff0c;轮换IP到底是什么&#xff1f;它有哪些特点&#xff1f;今天&#xff0c;我们就来揭开轮换IP的神秘面纱。 什么是轮换IP&#xff1f; 简单来说&#xff0c;轮换IP是指定期更换上网时使用的IP地址。…
阅读更多...
C++字体库开发二

C++字体库开发二

Font: 字体大小&#xff0c;方向&#xff0c;变换 FontContext: 多语言&#xff0c;更新&#xff0c;基础字体&#xff0c;表情 FontDescription: 字重&#xff0c;子样式&#xff0c;名称&#xff0c;底色 FontDir: 字体目标 FontFace: Regular,Bold特殊字重 FontFamily: 字体…
阅读更多...
嵌入式c语言3——自定义数据类型

嵌入式c语言3——自定义数据类型

结构体struct&#xff0c;共用体union 结构体中定义变量&#xff0c;首尾地址相连 对于union&#xff0c;其包含变量对起始地址相同 由于其起始地址相同&#xff0c;则改变其中某一变量值时有可能使得另一个变量值发生改变 enum 枚举&#xff0c;可以用来定义一堆整形常量构成…
阅读更多...
itk::ShapedNeighborhoodIterator类C2516问题

itk::ShapedNeighborhoodIterator类C2516问题

错误问题&#xff1a; 1>C:\itk\src-5.3.0\Modules\Core\Common\include\itkShapedNeighborhoodIterator.h(183,1): error C2516: itk::ShapedNeighborhoodIterator<TImage,TBoundaryCondition>::ConstIterator: is not a legal base class 1>C:\itk\src-5.3.0\Mo…
阅读更多...
解决Visual Studio 一直弹出管理员身份运行问题（win10/11解决办法）

解决Visual Studio 一直弹出管理员身份运行问题（win10/11解决办法）

不知道大家是否有遇到这个问题 解决办法也很简单 找到启动文件 如果是快捷方式就继续打开文件位置 找到这个程序启动项 右键 选择 兼容性疑难解答&#xff08;win11 则需要 按住 shift 右键&#xff09; win10 解决办法 这样操作完后就可以了 win11解决办法按以下选择就行
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023