Django传递dataframe对象到前端网页

news2024/11/22 16:13:37

在django前端页面上展示的数据,还是使用django模板自带的语法

方式1 不推荐使用 直接使用 【df.to_html(index=False)】

        使用to_html他会生成一个最基本的表格没有任何的样式,一点都不好看,如果有需要的话可以自行修改表格的样式,但博主觉得这样的方式太麻烦,

        后端

df = pd.DataFrame({'Name': ['John', 'Alice', 'Smith'],
                           'Age': [30, 25, 35],
                           'City': ['New York', 'London', 'Paris']})

# 将DataFrame转换为HTML字符串
table_html = df.to_html(index=False)
    
# 将表格数据和其他数据打包成上下文对象
content= {
    'table_html': table_html
    }
return render(request, '自己的前端网页', content)

        前端

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <table>
        {{ table_html | safe }}
    </table>
    <!-- 其他页面内容 -->
</body>
</html>

         效果

        

方式2  推荐使用 将df转为字典放到特定的表格下

        这个表格是博主已经写好<table>有一定的样式了,这个方式就是将每一行数据给放到表格里面,相当于只是传递了数值。

        下面的django模板语法能够动态的更新标题行和数据,数据表格有变动不需要修改前端模板

         后端

df = pd.DataFrame({'Name': ['John', 'Alice', 'Smith'],
                           'Age': [30, 25, 35],
                           'City': ['New York', 'London', 'Paris']})
table_data = df.to_dict('records')
table_headers = df.columns.tolist()
content = {
    'table_headers':table_headers,
    'table_data': table_data
}
return render(request, '自己的前端网页', content)

        前端

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="table-responsive">
        <div id="example_wrapper" class="dataTables_wrapper">
            <table id="example" class="display table dataTable" role="grid"
                               aria-describedby="example_info">
                <thead>
                    <tr>
                        {% for header in table_headers %}
                            <th>{{ header }}</th>
                        {% endfor %}
                        </tr>
                </thead>
                <tbody>
                    {% for row in table_data %}
                        <tr>
                            {% for value in row.values %}
                                 <td>{{ value }}</td>
                            {% endfor %}
                        </tr>
                    {% endfor %}
                 </tbody>
            </table>
        </div>
    </div>
    <!-- 其他页面内容 -->
</body>
</html>

         效果

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

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

相关文章

QEMU 啓動gdb 調試

背景 上一章介紹了如何使用QEMU 運行RISC-V 程序, GDB 作爲強大的代碼調試工具,對軟件開發至關重要,本章介紹如何啓動GDB 調試 CSDNhttps://mp.csdn.net/mp_blog/creation/editor/132522853 開啓GDB 服務 QEMU 啓動時添加-s參數, 代碼啓用本地GDB 服務, 默認端口號爲1234.…

Numpy数组(随时更新)

一、Numpy数组对象的重要属性 #导入库 import numpy as npdata np.arange(12).reshape(4,3)data2 np.arange(24).reshape(3,4,2) #ndim维度个数data.ndimdata2.ndim #shape形状几行几列 数组的维度data.shapedata2.shape#size数组的总个数data.sizedata2.size #dtype数组元素的…

《爵士乐史》乔德.泰亚 笔记

第一章 【美国音乐的非洲化】 【乡村布鲁斯和经典布鲁斯】 布鲁斯&#xff1a;不止包括忧愁、哀痛 十二小节布鲁斯特征&#xff1a; 1.乐型&#xff08;A:主、B:属、C/D:下属&#xff09;&#xff1a;A→A→B→A→C→D→A→A 2.旋律&#xff1a;大三、小三、降七、降五 盲人…

2023河南萌新联赛第(八)场 南阳理工学院F小前前

思路&#xff1a; 每次查询L - R的 最大连续子区间的或值 但是 我们都知道或的话 只会增加 不会减少 所以 L - R 的或值就是最大的子区间 然后再求与x的或值就ok了 但是 n1e5 q1e5 我们不能每次循环都暴力跑一边 那肯定是不行的 这里我们可以把他们拆成2进制 存放到二维数组里…

项目一:基于YOLOv7的输电线路销钉缺失检测项目

1. YOLOv7模型介绍 YOLOv7是目标检测算法YOLO&#xff08;You Only Look Once&#xff09;的第七个版本&#xff0c;也是目前较流行的YOLO算法版本之一。 YOLOv8主要结构&#xff1a; 1. Backbone网络&#xff1a;采用CSPDarknet53作为主干网络&#xff0c;在不增加参数数量…

springboot之一:配置文件(内外部配置优先顺序+properties、xml、yaml基础语法+profile动态切换配置、激活方式)

配置的概念&#xff1a; Spring Boot是基于约定的&#xff0c;所以很多配置都有默认值&#xff0c;但如果想使用自己的配置替换默认配置的话&#xff0c;就可以使用application.properties或者application.yml(application.yaml)进行配置。 注意配置文件的命名必须是applicat…

详解MES中的四大现场执行管理模式

导 读 ( 文/ 3426 ) 制造业是全球经济中至关重要的一部分&#xff0c;随着市场竞争的加剧和客户需求的多样化&#xff0c;企业需要寻找合适的生产方式来提高生产效率、降低成本并保证产品质量。在这个背景下&#xff0c;制造执行系统&#xff08;MES&#xff09;作为连接管理层…

【LLM模型篇】LLaMA2 | Vicuna | EcomGPT等(更新中)

文章目录 一、Base modelchatglm2模型Vicuna模型LLaMA2模型1. 训练细节2. Evaluation Results3. 更多参考 alpaca模型其他大模型和peft高效参数微调二、垂直领域大模型MedicalGPT&#xff1a;医疗大模型TransGPT&#xff1a;交通大模型​EcomGPT&#xff1a;电商领域大模型1. s…

WPF Material Design 初次使用

文章目录 前言相关资源快速开始快速开始说明地址 吐槽一下 前言 MD全称MaterialDesignInXamlToolkit&#xff0c;MaterialDesign和Bootstrap一样&#xff0c;都是一个UI风格库。相当于衣服中的休闲服&#xff0c;汉服&#xff0c;牛仔裤一样&#xff0c;就是风格不一样的Ui框架…

【包过滤防火墙-iptables】的简单使用

文章目录 规则链的分类--五链处理的动作iptables常用参数和作用 防火墙就是堵和通的作用 iptables &#xff1a;包过滤防火墙&#xff0c;是内核防火墙netfilter的管理工具 核心&#xff1a;四表五链 规则链的分类–五链 在进行路由选择前处理的数据包&#xff1a;PREROUTIN…

财报解读:成功通过“期中考”,创维多元布局产生多大协同效应?

2023年以来&#xff0c;在下游市场需求仍在复苏以及存量市场竞争加剧的背景之下&#xff0c;消费电子行业的发展受到不小挑战。不过&#xff0c;从中期业绩来看&#xff0c;可以发现一些企业还是具备一定的风险抵御能力&#xff0c;发展韧性显著&#xff0c;创维就是其中一员。…

十大管理——项目成本管理

目录 1.成本管理概念 2.成本管理的四个过程域 2.1四个过程的整体理解 ​2.2四个过程的ITO口诀版记忆 2.3过程1——制定项目管理计划 ​2.4过程2——项目成本估算​ 2.5过程3——项目成本预算 2.5过程4——项目成本控制 3计算题 1.成本管理概念 项目成本管理就是要确保…

window 常用基础命令

0、起步 0-1) 获取命令的参数指引 netstat /? 0-2) 关于两个斜杠&#xff1a; window 文件路径中使用反斜杠&#xff1a;\ linux 文件路径中使用&#xff1a;/ 1、开关机类指令 shutdown /s # 关机shutdown /r # 重启shutdown /l …

设备数据采集的挑战与机遇

导 读 ( 文/ 1661 ) 在现代制造业中&#xff0c;数据是实现高效、质量和盈利的关键驱动力。工厂设备数据采集是一种通过收集、分析和利用设备和流程数据&#xff0c;以提高生产效率、质量和可靠性的方法。 工厂设备数据可以提供有关设备性能、效率、健康状况和生产状况的…

OS 段页结合的实际内存管理

虚拟内存承接段和页&#xff0c;从用户角度&#xff0c;虚拟内存提供段&#xff0c;从硬件角度&#xff0c;虚拟内存把段打散映射到页 先基于段的翻译&#xff0c;再基于页的翻译 p是pcb跟着进程换&#xff0c;64M一个段&#xff0c;set base就是建段表 因为每个进程虚拟地址…

Java智慧工地源码 智慧工地APP源码

Java智慧工地源码 智慧工地APP源码 系统定义&#xff1a; 智慧工地信息化管理平台是依托计算机信息、网络通讯、物联网、系统集成及云计算技术&#xff0c;通过数据采集、信息动态交互、智能分析&#xff0c;建立起来的一套集成的项目建设综合管理系统。实现项目管理信息化、网…

51单片机项目(8)——基于51单片机的DS1302时钟系统

本次做的设计&#xff0c;是利用DS1302时钟芯片&#xff0c;做了一个时钟&#xff0c;并且将实时时间通过串口发送到上位机进行显示。系统运行如下&#xff1a;&#xff08;protues文件和相关keil代码会在文章最后给出&#xff01;&#xff01;&#xff01;&#xff09; DS1302…

使用 THREE.js 进行边界体积碰撞检测

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 使用 Box3 和 Sphere 三.js具有表示数学体积和形状的对象 - 对于3D AABB和边界球体&#xff0c;我们可以使用Box3和Sphere对象。实例化后&#xff0c;它们具有可用于针对其他卷进行交集测试的方法。 实例化盒子 要创…

zabbix 部署

1.zabbix简介 Zabbix 软件能够监控众多网络参数和服务器的健康度、完整性。Zabbix 使用灵活的告警机制&#xff0c;允许用 户为几乎任何事件配置基于邮件的告警。这样用户可以快速响应服务器问题。Zabbix 基于存储的数据 提供出色的报表和数据可视化功能。这些功能使得 Zabbix…