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

Django传递dataframe对象到前端网页

news 2026/4/4 3:34:59

在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

AI赋能：借助快马平台轻松打造集成大语言模型的智能openclaw飞书助手

最近在尝试给团队开发一个智能化的飞书助手&#xff0c;发现结合大语言模型的AI能力确实能大幅提升工作效率。经过一番摸索&#xff0c;我总结出一套用InsCode(快马)平台快速实现这类需求的方法&#xff0c;整个过程比想象中简单很多。 明确核心需求场景 智能助手主要解决三个高…...

编程新知 2026/4/4 2:57:24

OpenClaw压力测试：千问3.5-27B持续运行48小时稳定性报告

OpenClaw压力测试&#xff1a;千问3.5-27B持续运行48小时稳定性报告 1. 测试背景与设计思路 上周在星图平台部署了千问3.5-27B镜像后&#xff0c;我决定对OpenClaw框架进行极限压力测试。这个想法源于实际需求——作为独立开发者&#xff0c;经常需要AI助手连续处理夜间数据抓…...

编程新知 2026/4/4 0:56:19

直接可用4轴插补算法库，STM32的DDA插补联动与梯形加减速算法代码

可以直接使用的4轴插补算法库&#xff0c;不是丢给你一堆gr1b或者写字机或者3d打印的开源代码&#xff0c;本运控库上项目级别的&#xff0c;需要添加在自己的项目中&#xff0c;不支持gm码&#xff0c;只有运动控制核心代码&#xff0c;可以添加在自己项目中的&#xff0c;stm…...

编程新知 2026/4/4 0:54:19

科技服务机构如何提升服务专业性与客户对接效率？

观点作者&#xff1a;科易网-国家科技成果转化&#xff08;厦门&#xff09;示范基地 在数智时代浪潮下&#xff0c;科技服务机构面临着前所未有的机遇与挑战。数据成为关键资源&#xff0c;重塑了创新主体间的关系&#xff0c;科技成果向产业应用的转化链条发生了根本变革。然…...

编程新知 2026/4/3 23:38:53

接口实现第二步骤

接口实现流程模块化路由 -> API 接口规范文档定义模型类 -> 数据库表 &#xff08;数据库设计文档&#xff09;在 crud 文件夹里面创建文件&#xff0c;封装操作数据库的方法在路由处理函数里面调用 crud 封装好的方法&#xff0c;响应结果定义模型类规范基类&#xff0c…...

编程新知 2026/4/3 22:00:03

AI大模型的简历如何写才能拿到面试机会？简历+项目+面试技巧+面试题一套全搞定！

AI大模型的简历如何写才能拿到面试机会&#xff1f;简历项目面试技巧面试题一套全搞定&#xff01; 一、简历撰写&#xff1a;突出AI大模型核心能力 1. 技术栈明确标注 必写项&#xff1a; 框架&#xff1a;PyTorch、TensorFlow、Hugging Face Transformers、DeepSpeed、Lang…...

编程新知 2026/4/3 21:39:57

3个颠覆级提速方案：ComfyUI-Manager下载性能优化指南

3个颠覆级提速方案&#xff1a;ComfyUI-Manager下载性能优化指南 【免费下载链接】ComfyUI-Manager ComfyUI-Manager is an extension designed to enhance the usability of ComfyUI. It offers management functions to install, remove, disable, and enable various custom…...

编程新知 2026/4/3 20:35:30

kmp算法（完结）

1.重复的子字符串 class Solution { public:void getNext(vector<int> &next,const string s){int j0;next[j]0;for(int i1;i<s.size();i){while(j-1>0&&s[i]!s[j]){jnext[j-1];}if(s[i]s[j]){j;next[i]j;}else{next[i]0;}}}bool repeatedSubstringPa…...

编程新知 2026/4/3 20:11:13

Ohm模块化扩展与面向对象语法继承：构建可维护解析器的终极指南

Ohm模块化扩展与面向对象语法继承&#xff1a;构建可维护解析器的终极指南 【免费下载链接】ohm A library and language for building parsers, interpreters, compilers, etc. 项目地址: https://gitcode.com/gh_mirrors/oh/ohm Ohm是一个强大的解析器构建库和语言&am…...

编程新知 2026/4/3 20:01:11

计算机毕业设计：Python中国地铁网络智能分析系统 Flask框架 数据分析 可视化 高德地图 数据挖掘 机器学习 爬虫（建议收藏）✅

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ > &#x1f345;想要获取完整文章或者源码&#xff0c;或者代做&#xff0c;拉到文章底部即可与…...

编程新知 2026/4/3 18:46:25