Django传递dataframe对象到前端网页

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

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

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

后端

python 复制代码
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)

前端

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

效果

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

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

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

后端

python 复制代码
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)

前端

html 复制代码
<!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>

效果

相关推荐
B站_计算机毕业设计之家3 小时前
猫眼电影数据可视化与智能分析平台 | Python Flask框架 Echarts 推荐算法 爬虫 大数据 毕业设计源码
python·机器学习·信息可视化·flask·毕业设计·echarts·推荐算法
PPPPPaPeR.3 小时前
光学算法实战:深度解析镜片厚度对前后表面折射/反射的影响(纯Python实现)
开发语言·python·数码相机·算法
JaydenAI3 小时前
[拆解LangChain执行引擎] ManagedValue——一种特殊的只读虚拟通道
python·langchain
程序员Agions3 小时前
useMemo、useCallback、React.memo,可能真的要删了
前端·react.js
滕青山3 小时前
Vue项目BMI计算器技术实现
前端·vue.js
骇城迷影3 小时前
Makemore 核心面试题大汇总
人工智能·pytorch·python·深度学习·线性回归
长安牧笛3 小时前
反传统学习APP,摒弃固定课程顺序,根据用户做题正确性,学习速度,动态调整课程难度,比如某知识点学不会,自动推荐基础讲解和练习题,学习后再进阶,不搞一刀切。
python·编程语言
子兮曰3 小时前
深入浏览器指纹:Canvas、WebGL、Audio是如何暴露你的身份的?
前端·浏览器·canvas
月亮补丁3 小时前
AntiGravity只能生成 1:1 图片?一招破解尺寸限制
前端
何中应3 小时前
MindMap部署
前端·node.js