如何使用金字塔Web框架从Pandas数据框中显示JS数据表？

问题描述 投票：0回答：1

有一些使用Flask进行此操作的示例，因此理论上也可以使用Pyramid进行此操作，但是到目前为止，还没有做到。我正在尝试使用DataTables中的Pyramid web framework JS库显示熊猫数据框。这是我的文件夹/文件结构：

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

这些文件中的大多数都未通过金字塔形切刀代码here修改。但是我编辑的文件粘贴在下面。

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&nbsp;Pyramid application generated&nbsp;by<br><span class="font-normal">Cookiecutter</span>.</p> -->
  <p class="lead">Welcome to <span class="font-normal">{{project}}</span>, a&nbsp;Pyramid application generated&nbsp;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（为数据表添加了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 &copy; 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文本。任何帮助将不胜感激！

pandas datatables jinja2 pyramid
1个回答
0
投票

您没有任何HTML <table>会在Jinja模板中呈现数据。传递到该模板的数据应该是Python字典。下面的示例假定您将字典users传递给模板。

views / 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)

mytemplate.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 %}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.