Как отобразить JS DataTable из Pandas фрейма данных, используя веб-фреймворк Pyramid? - PullRequest
Новая
       41

Как отобразить JS DataTable из Pandas фрейма данных, используя веб-фреймворк Pyramid?

0 голосов
/ 11 марта 2020

Есть несколько примеров того, как это сделать с Flask, так что теоретически это должно быть возможно и с Pyramid, но пока не удалось. Я пытаюсь отобразить Pandas фрейм данных с помощью библиотеки DataTables JS в веб-фреймворке Pyramid . Вот моя структура папок / файлов: 

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 здесь . Но файлы, которые я редактирую, вставлены ниже.

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, она отображает только текст по умолчанию HTML с форматированием CSS. Любая помощь с этим будет принята с благодарностью!

1 Ответ

0 голосов
/ 11 марта 2020

У вас нет HTML <table>, который бы отображал данные в вашем шаблоне Jinja. Данные, которые передаются в этот шаблон, должны быть Python dict. В приведенном ниже примере предполагается, что вы передаете dict 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 %}
...