pandas - 如何使用 Pyramid Web 框架从 Pandas 数据框中显示 JS DataTable?
问题描述
有一些这样做的例子Flask
,所以理论上这也应该是可能的Pyramid
,但到目前为止,还不能。我正在尝试使用Pyramid web framework中的DataTables JS 库显示 Pandas 数据框。这是我的文件夹/文件结构:
repo_name/
modules/
get_df.py
static/
theme.css
templates/
layout.jinja2
mytemplate.jinja2
views/
__init__.py
default.py
routes.py
development.ini
production.ini
setup.py
这些文件中的大多数都没有从此处的 Pyramid cookiecutter 代码中修改。但是我编辑的文件粘贴在下面。
views/default.py
from pyramid.view import view_config
from repo_name.modules.get_df import main
@view_config(route_name='home', renderer='../templates/mytemplate.jinja2')
def my_view(request):
df = main()
html_table = df.to_html(table_id='myTable')
return dict(project='my_project', table=html_table)
mytemplate.jinja2
{% extends "layout.jinja2" %}
{% block content %}
<div class="content">
<h1><span class="font-semi-bold">Pyramid</span> <span class="smaller">Starter project</span></h1>
<!-- <p class="lead">Welcome to <span class="font-normal">{{project}}</span>, a Pyramid application generated by<br><span class="font-normal">Cookiecutter</span>.</p> -->
<p class="lead">Welcome to <span class="font-normal">{{project}}</span>, a Pyramid application generated by<br><span class="font-normal">Cookiecutter</span>.</p>
</div>
{% endblock content %}
{% block additional_scripts %}
<!-- <script type="text/javascript" src="../static/mytemplate.js"></script> -->
<script type="text/javascript">
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
{% endblock %}
layout.jinja2
(为 DataTables 添加了 CDN)
<!DOCTYPE html>
<html lang="{{request.locale_name}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="pyramid web application">
<meta name="author" content="Pylons Project">
<link rel="shortcut icon" href="{{request.static_url('repo_name:static/pyramid-16x16.png')}}">
<title>Cookiecutter Starter project for the Pyramid Web Framework</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom styles for this scaffold -->
<link href="{{request.static_url('repo_name:static/theme.css')}}" rel="stylesheet">
<!-- My: DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script>
<![endif]-->
</head>
<body>
<div class="starter-template">
<div class="container">
<div class="row">
<div class="col-md-2">
<img class="logo img-responsive" src="{{request.static_url('repo_name:static/pyramid.png') }}" alt="pyramid web framework">
</div>
<div class="col-md-10">
{% block content %}
<p>No content</p>
{% endblock content %}
</div>
</div>
<div class="row">
<div class="links">
<ul>
<li><i class="glyphicon glyphicon-cog icon-muted"></i><a href="https://github.com/Pylons/pyramid">Github Project</a></li>
<li><i class="glyphicon glyphicon-globe icon-muted"></i><a href="https://webchat.freenode.net/?channels=pyramid">IRC Channel</a></li>
<li><i class="glyphicon glyphicon-home icon-muted"></i><a href="https://pylonsproject.org">Pylons Project</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="copyright">
Copyright © Pylons Project
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- My: DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
{% block additional_scripts %}{% endblock %}
</body>
</html>
生成的网页不显示 DataTable 或原始 HTML 表格,它只显示带有 CSS 格式的默认 HTML 文本。对此的任何帮助将不胜感激!
解决方案
您没有任何<table>
可以在 Jinja 模板中呈现数据的 HTML。传入该模板的数据应该是 Python 字典。下面的示例假设您将 dict 传递users
给模板。
视图/default.py
@view_config(route_name='home', renderer='../templates/mytemplate.jinja2')
def my_view(request):
# insert function here that returns users as a Python dict
return dict(project='my_project', users=users)
我的模板.jinja2
{% if users %}
<div class="table-responsive">
<table id="datatable" class="table table-striped table-bordered table-hover table-condensed" style="width:100%">
<thead>
<tr>
<th data-orderable="false">Edit</th>
<th data-orderable="false">Delete</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td><a href="{{ request.route_url('user_edit', user_id=user['id']) }}"><i class="glyphicon glyphicon-pencil"></i></a></td>
<td><a href="{{ request.route_url('user_delete', user_id=user['id']) }}"><i class="glyphicon glyphicon-remove"></i></a></td>
<td>{{ user['username'] }}</td>
<td>{{ user['role'] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="alert alert-info" role="alert">No users found.</div>
{% endif %}
推荐阅读
- css - Flexbox 行在 VS2015 Update 3 设计视图中显示为列
- javascript - 动态创建嵌套列表项
- angular - 是否可以使用 Angular 7 以文本形式构建动态 URL
- python - 如何下载 xlsm 文件并使用 openpyxl 读取它?
- javascript - HTML 未在 div 内格式化生成错误
- c# - 检查二维数组的行是否为真
- java - 拆分/复制代理 - 制作精确副本
- html - HTML带格式的标签
- iis - 如何在 IIS 的网站子文件夹中部署 ASP.NET Core 应用程序?
- php - 将脚本添加到 drupal 7 上的某些节点和页面