简单的数据表烧瓶

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>

访问urlhttp://127.0.0.1:5000/page_test只会显示json文件。

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

Answer 1

我认为你需要做两件事：

1. Datatables 期望数据是一个对象数组。您可以阅读有关预期数据结构 here 的更多信息。你的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. 默认情况下，Datatables 期望数据位于 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
    .....

Answer 2

http://fb4demo.bitplan.com/datatable 有一个演示。

它使用https://github.com/WolfgangFahl/pyFlaskBootstrap4 作为构建在https://github.com/greyli/bootstrap-flask 之上的库

作为库的提交者，我建议查看可能使您的生活更简单的示例（至少在熟悉基础库之后的长远来看）。

例如 https://github.com/WolfgangFahl/pyFlaskBootstrap4/blob/main/fb4_example/bootstrap_flask/templates/datatable.html

具有添加数据表激活的模板：

{% block scripts %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.table').DataTable();
    });
    </script>
{% endblock %}

python代码缩短为：

 def datatable(self):
        '''
        test data table
        '''
        icons=BootstrapIcon.query.all()
        dictList=[]
        for icon in icons:
            dictList.append(icon.asDict())
        return render_template('datatable.html',listOfDicts=dictList)

你的例子需要：

    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}
   ]

只需使用相同的 dict 键添加更多记录，您就会拥有一个真实的表。 作为 listOfDicts ，您将被设置。