当前位置： 首页 > news >正文

Django传递dataframe对象到前端网页

news 2025/7/12 14:08:33

在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>

         效果

相关文章：

Django传递dataframe对象到前端网页

在django前端页面上展示的数据&#xff0c;还是使用django模板自带的语法 方式1 不推荐使用 直接使用 【df.to_html(indexFalse)】 使用to_html他会生成一个最基本的表格没有任何的样式&#xff0c;一点都不好看&#xff0c;如果有需要的话可以自行修改表格的样式&#xff0c;…...

编程日记 2023/9/3 13:06:04

iOS swift5 弹出提示文字（停留1~2s）XHToastSwift

CoderZhuXH/XHToastSwift - github // // XHToast.swift // XHToastSwiftExample // // Created by xiaohui on 16/8/12. // Copyright © 2016年 CoderZhuXH. All rights reserved. // 代码地址:https://github.com/CoderZhuXH/XHToastSwiftimport UIKit/*** Toast…...

编程日记 2023/9/3 13:05:03

Spring Bean 的生命周期，如何被管理的

实例化一个Bean&#xff0c;也就是我们通常说的new 按照Spring上下文对实例化的Bean进行配置&#xff0c;也就是IOC注入 如果这个Bean实现了BeanNameAware接口&#xff0c;会调用它实现的setBeanName(String beanId)方法&#xff0c;此处传递的是Spring配置文件中Bean的ID 如…...

编程日记 2023/9/3 13:04:00

MATLAB算法实战应用案例精讲-【概念篇】量子机器学习

目录 前言 几个高频面试题目 机器学习的方法论 知识储备 机器学习的实现...

编程日记 2023/9/3 13:02:59

【kubernetes】Argo Rollouts -- k8s下的自动化蓝绿部署

蓝绿（Blue-Green）部署简介 在现代软件开发和交付中，确保应用程序的平稳更新和发布对于用户体验和业务连续性至关重要。蓝绿部署是一种备受推崇的部署策略，它允许开发团队在不影响用户的情况下，将新版本的应用程序引入生产环境。 蓝绿部署的核心思想在于维护两个独立的环…...

编程日记 2023/9/3 13:01:57

vue Cesium接入在线地图

Cesium接入在线地图只需在创建时将imageryProvider属性换为在线地图的地址即可。 目录 天地图 OSM地图 ArcGIS 地图 谷歌影像地图 天地图 //矢量服务let imageryProvider new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/vec_w/wmts?s…...

编程日记 2023/9/3 13:00:57

OBS Studio 30.0 承诺在 Linux 上支持英特尔 QSV，为 DeckLink 提供 HDR 回放功能

导读OBS Studio 30.0 现已推出公开测试版&#xff0c;承诺为这款广受欢迎的免费开源截屏和流媒体应用程序提供多项令人兴奋的新功能&#xff0c;以及大量其他更改和错误修复。 OBS Studio 30.0 承诺在 Linux 上支持英特尔 QSV&#xff08;快速同步视频&#xff09;、WHIP/WebRT…...

编程日记 2023/9/3 12:59:56

springboot整合SpringSecurity

先写了一个配置类 给这个访问路径&#xff0c;加上角色权限 package com.qf.config;import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; impo…...

编程日记 2023/9/3 12:58:53

最近在搭建ELK日志平台时，logstash报错JSON parse error

直接进入正题&#xff0c;我在搭建elk日志&#xff0c;使用最简单的log4j2 socket json格式 输出到logstash. 但是logstash报错如下&#xff1a; [WARN ] 2023-08-30 10:15:17.766 [nioEventLoopGroup-2-2] jsonlines - JSON parse error, original data now in message field…...

编程日记 2023/9/3 12:57:52

某次护网红队getshell的经历

信息收集 某企业提供信息&#xff1a;企业官网的真实外网ip&#xff0c;内网ip 企业官网比较硬&#xff0c;从控股超过51%的子公司入手 通过企查查找到一堆控股高的子公司&#xff0c;通过ICP/IP地址/域名信息备案管理系统查找子公司官网&#xff0c;收集二级域名。通过google…...

编程日记 2023/9/3 12:56:51

C#实现日期选择器、显示当地时间、跑马灯等功能

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System...

编程日记 2023/9/3 12:55:50

如何让看书变听书？

听书神器 安卓 页面简单&#xff0c;易操作&#xff0c;全网小说随便听 各种声音帮你读你喜欢听的小说&#xff0c;带你进入主人公世界 支持网页版小说、本地小说、图片&#xff0c;都能读给你听 想看小说&#xff0c;又怕伤眼睛的宝子&#xff0c;可以试试看&#xff01;…...

编程日记 2023/9/3 12:54:50

pytorch异常——loss异常，不断增大，并且loss出现inf

文章目录 异常报错异常截图异常代码原因解释修正代码执行结果 异常报错 epoch1:loss3667.782471 epoch2:loss65358620.000000 epoch3:loss14979486720.000000 epoch4:loss1739650891776.000000 epoch5:loss12361745880317952.000000 epoch6:loss2740315398365287284736.000000…...

编程日记 2023/9/3 12:53:49

Lua学习（一）

lua基础学习 LUA 语言1. 什么是lua&#xff1f;1.1 准备工作 2. 基本语法2.1 注释2.2 标识符2.3 关键字2.4 全局变量 3. 数据类型4. 变量4.1 赋值语句 5. 循环5.1 while循环5.2 for循环5.3泛型for循环5.4 repeat until 循环5.5 break 语句 6. 流程控制6.1 if语句6.2 if else 语…...

编程日记 2023/9/3 12:52:48

Python：列表推导式

相关阅读 Python专栏https://blog.csdn.net/weixin_45791458/category_12403403.html?spm1001.2014.3001.5482 列表推导式使得创建特定列表的方式更简洁。常见的用法为&#xff0c;对序列或可迭代对象中的每个元素应用某种操作&#xff0c;用生成的结果创建新的列表&#xff…...

编程日记 2023/9/3 12:51:47

应急三维电子沙盘数字孪生系统

一、简介应急三维电子沙盘数字孪生系统是一种基于虚拟现实技术和数字孪生技术的应急管理工具。它通过将真实世界的地理环境与虚拟世界的模拟环境相结合&#xff0c;实现了对应急场景的模拟、分析和决策支持。该系统主要由三维电子沙盘和数字孪生模型两部分组成。三维电子沙盘是…...

编程日记 2023/9/3 12:50:46

LeetCode每日一题：1654. 到家的最少跳跃次数（2023.8.30 C++）

目录 1654. 到家的最少跳跃次数 题目描述&#xff1a; 实现代码与解析&#xff1a; bfs 1654. 到家的最少跳跃次数 题目描述&#xff1a; 有一只跳蚤的家在数轴上的位置 x 处。请你帮助它从位置 0 出发&#xff0c;到达它的家。 跳蚤跳跃的规则如下&#xff1a; 它可以 …...

编程日记 2023/9/3 12:49:45

数据结构例题代码及其讲解-栈与队列

栈与队列 栈Stack 后进先出 ​ 栈的结构体定义及基本操作。 #define MaxSize 50 typedef struct {int data[MaxSize];//栈中存放数据类型为整型int top;//栈顶指针 }Stack;初始化 ​ 这里初始化时是将栈顶指针指向-1&#xff0c;有些则是指向0&#xff0c;因此后续入栈出栈…...

编程日记 2023/9/3 12:48:44

【Spark】Pyspark RDD

1. RDD算子1.1 文件 <> rdd对象1.2 map、foreach、mapPartitions、foreach Partitions1.3 flatMap 先map再解除嵌套1.4 reduceByKey、reduce、fold 分组聚合1.5 mapValue 二元组value进行map操作1.6 groupBy、groupByKey1.7 filter、distinct 过滤筛选1.8 union 合并1.9 …...

编程日记 2023/9/3 12:47:43

数学建模：Logistic回归预测

&#x1f506; 文章首发于我的个人博客&#xff1a;欢迎大佬们来逛逛 数学建模&#xff1a;Logistic回归预测 Logistic回归预测 logistic方程的定义&#xff1a; x t 1 c a e b t x_{t}\frac{1}{cae^{bt}}\quad xt​caebt1​ d x d t − a b e b t ( c a e b t ) 2 >…...

编程日记 2023/9/3 12:46:42

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/7/11 19:02:34

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/7/11 10:50:55

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/6/17 5:29:50

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/7/11 11:11:57

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/9 21:22:02

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/7/11 1:36:04

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/7/8 17:08:17

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/6/21 8:18:07

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/7/12 9:10:41

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/6/21 2:45:17