Flask：使用 dataTables.js 显示数据框答案

【问题标题】：Flask: display a dataframe by using dataTables.jsFlask：使用 dataTables.js 显示数据框
【发布时间】：2018-06-10 02:46:34
【问题描述】：

我要做的就是在单击按钮后在网络上显示一个数据框。我正在使用flask 并尝试使用dataTables.js。但我对所有这些工具都很陌生 TAT

所以到现在为止，我的输出是：点击按钮后，我跳转到./extract页面，所有数据都是这样显示的：

{ "my_table": "\n \n \n trade_date\n rem_period\n bond_code\n bond_name\n bond_rating\n bond_yield\n note\n offer\n bid\n amount\n \n \n \n \n 2018 -04-04\n 8d\n 1382161\n 13\u6e1d\u6c34\u6295MTN1\n AA+/AAA\n 3.6\n 无\n \u56fd\u5bff\u517b\u8001\n \u94f6\u534e\u57fa\u91d1 \n 1000\n \n \n 2018-04-04\n 39d\n 1382227\n 13\u9ec4\u65c5\u6e38MTN1\n AAA\n 4.6\n 无\n \u4e2d\u6b27\u57fa\u91d1\n \u5706\u4fe1\u6c38\u4e30\n 3000\n \n \n 2018-04-04\n 99d\n 101356002\n 13\u6e1d\u5bccMTN001\n AAA\n 4.4\n 无\n \u56fd\u5bff \u517b\u8001\n

但是，我想要的是表格以正确的表格格式显示在索引页面上。你能看看是什么问题吗？

views.py

@app.route('/extract', methods=['GET', 'POST'])
def extract_excel():
    file = request.files['file']
    filename = file.filename
    database_name = FiveComps
    ...

        df = df[df['trade_date'] == request.form['upload_date']]
        return jsonify(my_table=df.to_html(classes='table table-striped" id = "a_nice_table', index=False, border=0))
    return render_template("index.html")

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bond</title> 
    <script src="static/jquery-3.3.1.min.js"></script>
    <script src="static/jquery-latest.js"></script> 
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

    <script>
      $(document).ready(function() {
        $('#showtable').bind("click", function(){
          $.getJSON('/extract', function(data){
            $("#mytablediv").html(data.my_table);
            $('#a_nice_table').DataTable();
          });
        });  
    });
    </script>     

  </head>  

  <body> 
    <div>
      <form action="/extract" method="post" enctype="multipart/form-data">
        <input type="file" name="file"></input>
        <input type="text" name="upload_date" placeholder="2018-01-01"></input>
        <button type="submit" id="showtable">Preview</button>
      </form>
      <div id="mytablediv">Here should be a table</div>

    </div>
  </body>
</html>

我省略了一些不相关的代码。

【问题讨论】：

标签： jquery html dataframe flask datatables

【解决方案1】：

你在使用熊猫吗？在此处查看有关样式https://pandas.pydata.org/pandas-docs/stable/style.html# 的文档然后你可以使用：

html_string = df.style.render()

将此传递给 jinja2 模板并呈现为原始 html 安全。

{{html_string|safe}}

【讨论】：