Question

我正在寻找HTML页面中表格形式数据显示的帮助。 Commerial是pandas数据框，我正在尝试通过按钮单击代码的HTML部分中突出显示的脚本部分来调用此数据框。目前数据显示为列表格式而非表格格式。样本数据结果：

目前的结果：

＆＃34; [＆＃39;表格边框=＆＃34; 1＆＃34; class =＆＃34; dataframe Commercial＆＃34;＆gt;学科领域 Table_Name Field_Name DQ_Dimension 规则优先级Rule_Type COMSOI2商业 Commercial_source_data Facility_Number 准确度......]＆＃34;

预期结果

主题领域Table_Name Field_Name商业
Commercial_source_data Facility_Number ......等

python代码：

from flask import *
import pandas as pd
app = Flask(__name__)

@app.route("/bzrules")
def show_tables():
    df = pd.read_excel('static/data.xlsx')
    df.set_index(['DR_ID'], inplace=True)
    df.index.name=None
    if request.method == 'GET':
        subarealist = df['Subject_Area'].unique().tolist()
        Commercial = df.loc[df['Subject_Area']=='Commercial']
        return render_template('indext.html',subarealist =subarealist,tables=[Commercial.to_html(classes='Commercial',bold_rows = 'True')])

- HTML部分

<!DOCTYPE html>
<html lang="en">    
<head>
  <title>DQA</title>
  <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/simple-sidebar.css') }}">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>    
<body>
   <div id="sidebar-wrapper">
      <ul class="sidebar-nav" >
         <li class="sidebar-brand">
            <a href="#">Dashboard</a>
         </li>
         <li>
            <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Subject Area <i class="fa fa-fw fa-caret-down"></i></a>
            <ul id="demo" class="collapse">
               <li>
                  <div id="btn1" class="input-group">
                     {% for val in subarealist %}
                     <a href='#' value='{{val}}' {% if selected==val %}{% endif%}>{{val}}</a>
                     {% endfor %}       
                  </div>
               </li>
            </ul>
         </li>
      </ul>
   </div>
   <!-- /#sidebar-wrapper -->
   <!-- Page Content -->
   <div id="page-content-wrapper">
      <div class="container-fluid">
         <div class="row">
            <div class="col-lg-12">
               <p id="tt">{% for table in tables %}
                  {{tables[loop.index]}}
                  {{ table|safe }}
                  {% endfor %}
               </p>
            </div>
         </div>
      </div>
   </div>
        <!-- /#page-content-wrapper -->

***<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#tt").html('{{ tables }}');
      });
});
</script>***
</body>
</html>

通过Jquery将Pandas DataFrame渲染到Flask应用程序中的HTML页面

0 个答案: