简单的数据表烧瓶

Question

我没有网络开发经验，我想用flask为指定字段的表添加数据，这是我的应用程序

from flask import *

from flask import jsonify

app = Flask(__name__)

@app.route('/page_test')                                                                                  
def page_test():
    meas = {"MeanCurrent": 0.05933, "Temperature": 15.095, "YawAngle": 0.0, "MeanVoltage": 0.67367, "VoltageDC": 3.18309, "PowerSec": 0.06923, "FurlingAngle": -0.2266828184, "WindSpeed": 1.884, "VapourPressure": 1649.25948, "Humidity": 0.4266, "WindSector": 0, "AirDensity": 1.23051, "BarPressure": 1020.259, "time": "2015-04-22 20:58:28", "RPM": 0.0, "ID": 1357}
    return jsonify(meas)

if __name__ == "__main__":
    app.run(debug=True)

这是我的 html (templates/view.html)

<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>

<table id="myTable" class="table table-striped" style="width:100%" >
            <thead>
              <tr>
            <th>Time</th>
            <th>Mean Current</th>
            <th>Vapour Pressure</th>
            <th>Mean Voltage</th>
            <th>Temperature</th>
            <th>Humidity</th>
            <th>Bar Pressure</th>
            <th>RPM</th>
            <th>Wind Sector</th>
            <th>Wind Speed</th>
            <th>Air Density</th>
            <th>DC Voltage</th>                
            <th>Power Sector</th>
            <th>Furling Angle</th>
            <th>Yaw angle</th>                                   
          </tr>
        </thead> 
          </table>  
<script>
$(document).ready(function() {
    $('#myTable').DataTable( {
        "processing": true,
        "ajax": "/page_test",
        // add column definitions to map your json to the table                                           
        "columns": [
            {data: "time"},
            {data: "MeanCurrent"},
            {data: "VapourPressure"},
            {data: "MeanVoltage"},
            {data: "Temperature"},
            {data: "Humidity"},
            {data: "BarPressure"},
            {data: "RPM"},
            {data: "WindSector"},
            {data: "AirDensity"},
            {data: "VoltageDC"},
            {data: "PowerSec"},
            {data: "FurlingAngle"},
            {data: "YawAngle"}
        ]
    } );
});
</script>

访问 url http://127.0.0.1:5000/page_test只显示 json 文件。

如何让脚本读取数据并显示表格？

Answer 1

我认为你需要做两件事：

1. Datatables 期望数据是一个对象数组。您可以在此处阅读有关预期数据结构的更多信息。您meas需要是一个 Python 列表，例如：

   meas = [{"MeanCurrent": 0.05933, "Temperature": 15.095, "YawAngle": 0.0, "MeanVoltage": 0.67367, "VoltageDC": 3.18309, "PowerSec": 0.06923, "FurlingAngle": -0.2266828184, "WindSpeed": 1.884, "VapourPressure": 1649.25948, "Humidity": 0.4266, "WindSector": 0, "AirDensity": 1.23051, "BarPressure": 1020.259, "time": "2015-04-22 20:58:28", "RPM": 0.0, "ID": 1357}]

2. 默认情况下，数据表期望数据位于data对象中。您有两个选择：

选项 1：像这样返回数据对象中的数据：

return jsonify({'data': meas})

选项 2：使用ajax.dataSrc选项告诉 Datatables 在哪里可以找到数据，例如：

$('#myTable').DataTable( {
    "processing": true,
    "ajax": {url: "/page_test", 
             dataSrc: ""
            },
    // add column definitions to map your json to the table
    .....