Question

我想要做的就是在点击按钮后在网上显示数据框。我正在使用flask并尝试使用dataTables.js。但我对所有这些工具都是新手TAT

所以到目前为止，我的输出是：点击按钮后，我跳转到./extract页面，所有数据都显示如下：

{ “my_table”：“\ n \ n \ n \ n \ nintra_date \ n \ tad_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无\ u \ u56fd \ u5bff \ u517b \ u8001 \ n \ u94f6 \ u534e \ u57fa \ u91d1 \ N 1000 \ n \ n \ n 2018年4月4日\ 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>

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

Answer 1

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

html_string = df.style.render()

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

{{html_string|safe}}

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

1 个答案: