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

目录

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.mfbz.cn/a/769314.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Unity中模拟抛物线（非Unity物理）

Unity中模拟抛物线（非Unity物理）

Unity中模拟抛物线非Unity物理 介绍剖析问题以及所需公式重力加速度公式&#xff1a;h 1/2*g*t*t(h 1/2 * g * t ^ 2)速度公式&#xff1a;Vt V初 a * t 主要代码总结 介绍 用Unity物理系统去做的抛物线想要控制速度或者想要细微的控制一些情况是非常困难的。所以想要脱离U…
阅读更多...
Flutter——最详细(Drawer)使用教程

Flutter——最详细(Drawer)使用教程

背景 应用左侧或右侧导航面板&#xff1b; 属性作用elevation相当于阴影的大小 import package:flutter/material.dart;class CustomDrawer extends StatelessWidget {const CustomDrawer({Key? key}) : super(key: key);overrideWidget build(BuildContext context) {return…
阅读更多...
【Python】已解决ModuleNotFoundError: No module named ‘tensorflow‘

【Python】已解决ModuleNotFoundError: No module named ‘tensorflow‘

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决ModuleNotFoundError: No module named ‘tensorflow‘ 一、分析问题背景 ModuleNotFoundError: No module named ‘tensorflow’ 是一个常见的错误&#xff0c;通常在Pytho…
阅读更多...
MATLAB常用语句总结7

MATLAB常用语句总结7

MATLAB总结7&#xff1a;常见错误归纳 文章目录 MATLAB总结7&#xff1a;常见错误归纳前言一、rand 的使用二、蒙塔卡罗求解方法1.函数的定义2.函数引用 三、函数引用与多变量四、矩阵引用五、非线性函数&#xff1a;fmincon的使用六、线性规划函数1.linprog2.fminbnd、fminsea…
阅读更多...
Docker学习笔记（二）镜像、容器、仓库相关命令操作

Docker学习笔记（二）镜像、容器、仓库相关命令操作

一、docker镜像操作 列出镜像列表 我们可以使用 docker images 来列出本地主机上的镜像。 各个选项说明: REPOSITORY&#xff1a;表示镜像的仓库源 TAG&#xff1a;镜像的标签 IMAGE ID&#xff1a;镜像ID CREATED&#xff1a;镜像创建时间 SIZE&#xff1a;镜像大小 查…
阅读更多...
pdf太大怎么压缩大小，pdf文件太大如何压缩变小

pdf太大怎么压缩大小，pdf文件太大如何压缩变小

在数字化时代&#xff0c;pdf文件已成为我们工作、学习和生活中不可或缺的一部分。然而&#xff0c;随着文件内容的丰富&#xff0c;pdf文件的体积也日益增大&#xff0c;给存储和传输带来不便。本文将为你详细介绍四种实用的pdf文件压缩方法&#xff0c;帮助你轻松减小pdf容量…
阅读更多...
【ROS2】初级：CLI工具 -配置环境

【ROS2】初级：CLI工具 -配置环境

目标&#xff1a;本教程将指导您如何准备您的 ROS 2 环境。 教程级别&#xff1a;初学者 时间&#xff1a;5 分钟 目录 背景 先决条件 任务 源代码设置文件将源添加到您的 shell 启动脚本检查环境变量 摘要 下一步 背景 ROS 2 依赖于使用 shell 环境组合工作空间的概念。“Work…
阅读更多...
C# Winform自制多轴力臂(简单易懂，方便扩展)

C# Winform自制多轴力臂(简单易懂，方便扩展)

WinForms框架广泛应用于上位机开发领域&#xff0c;其中对力臂的精准控制是常见需求之一。本文深入探讨了如何创建自定义的多轴力臂图形控件&#xff0c;不仅涵盖了力臂图形控件的角度调节机制&#xff0c;还详细展示了如何实现力臂运动的生动动态效果&#xff0c;为开发者提供…
阅读更多...
解决VSCode中导入PyTorch时报错的HTTP错误与Channel冲突

解决VSCode中导入PyTorch时报错的HTTP错误与Channel冲突

问题描述与解释 在Anaconda中成功安装PyTorch&#xff0c;并进行了验证&#xff1a; (base) C:\Users\Hui>conda activate pytorch(pytorch) C:\Users\\Hui>python Python 3.8.19 (default, Mar 20 2024, 19:55:45) [MSC v.1916 64 bit (AMD64)] :: Anaconda, Inc. on …
阅读更多...
妙手ERP支持授权TikTok Shop全托管店铺，支持智能编辑、定时发布等操作！

妙手ERP支持授权TikTok Shop全托管店铺，支持智能编辑、定时发布等操作！

全托管模式可以说是近两年跨境电商的热潮&#xff0c;在全托管模式下&#xff0c;卖家只需备货&#xff0c;平台进行运营、履约。因此&#xff0c;这种模式也迅速成为计划出海的跨境卖家重点关注方向。 一、TikTok Shop全托管 目前&#xff0c;几大主流跨境电商平台都已上线全…
阅读更多...
springboot旅游管理系统-计算机毕业设计源码16021

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

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

【操作与配置】VSCode配置C/C++及远程开发

MINGW环境配置 进入网站&#xff0c;如下图下载&#xff1a;MinGW Distro - nuwen.net 运行安装包&#xff0c;使其安装在你指定的位置 将MinGW的bin目录添加到系统的环境变量PATH中 使用 winx 选择进入“系统”点击“高级系统设置”在“系统属性&#xff1a;高级”窗口中&am…
阅读更多...
Vue前端打包

Vue前端打包

关于NGINX 介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少&#xff0c;并发能力强&#xff0c;在各大型互联网公司都有非常广泛的使用。 NGiMx 官网:https://nginx.org/ conf 配置文件目录 html静态资源文件目录 lo…
阅读更多...
学习笔记（linux高级编程）11

学习笔记（linux高级编程）11

进程间通信 》信号通信 应用&#xff1a;异步通信。 中断&#xff0c;&#xff0c; 1~64&#xff1b;32应用编程。 如何响应&#xff1a; Term Default action is to terminate the process. Ign Default action is to ignore the signal. wait Core Default action is …
阅读更多...
Ignis 应用： 社交 + 游戏 + 工业4.0，Ignis 构建Web3生态圈

Ignis 应用： 社交 + 游戏 + 工业4.0，Ignis 构建Web3生态圈

引言 在数字经济快速发展的今天&#xff0c;Web3技术为我们带来了前所未有的变革。作为Ardor平台的主要子链&#xff0c;Ignis公链在推动Web3生态系统建设中扮演了重要角色。本文将通过介绍Vessel Chain、Mythical Beings和Bridge Champ等应用&#xff0c;探讨Ignis公链如何通…
阅读更多...
基于循环神经网络的一维信号降噪方法（简单版本，Python）

基于循环神经网络的一维信号降噪方法（简单版本，Python）

代码非常简单。 import torch import torch.nn as nn from torch.autograd import Variable from scipy.io.wavfile import write #need install pydub module #pip install pydub import numpy as np import pydub from scipy import signal import IPython import matplot…
阅读更多...
基于强化学习DQN的股票预测【股票交易】

基于强化学习DQN的股票预测【股票交易】

强化学习笔记 第一章 强化学习基本概念 第二章 贝尔曼方程 第三章 贝尔曼最优方程 第四章 值迭代和策略迭代 第五章 强化学习实例分析:GridWorld 第六章 蒙特卡洛方法 第七章 Robbins-Monro算法 第八章 多臂老虎机 第九章 强化学习实例分析:CartPole 第十章 时序差分法 第十一…
阅读更多...
swiftui中常用组件picker的使用，以及它的可选样式

swiftui中常用组件picker的使用，以及它的可选样式

一个可选项列表就是一个picker组件搞出来的&#xff0c;它有多个样式可以选择&#xff0c;并且可以传递进去一些可选数据&#xff0c;有点像前端页面里面的seleted组件&#xff0c;但是picker组件的样式可以更多。可以看官方英文文档&#xff1a;PickerStyle | Apple Developer…
阅读更多...
【Week-G2】人脸图像生成（DCGAN）--pytorch版本

【Week-G2】人脸图像生成（DCGAN）--pytorch版本

文章目录 0、遇到的问题1、配置环境 & 导入数据2、定义模型3、训练模型4、什么是DCGAN? &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 本文环境&#xff1a; 系统环境&#xff1a;…
阅读更多...
从搜索框的提示词中再探防抖和节流

从搜索框的提示词中再探防抖和节流

前言 最近逛掘金时&#xff0c;看到了一篇文章。发现是我之前写过的一篇文章主题是防抖和节流的&#xff0c;看防抖时没感觉哪里不一样&#xff0c;但是当我看到节流时发现他的节流怎么这么繁琐(・∀・(・∀・(・∀・*)&#xff1f; 抱着疑惑的想法&#xff0c;我仔细拜读了这…
阅读更多...
最新文章

Copyright @ 2022~2023