Question

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

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>

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

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

Answer 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}]
默认情况下，数据表期望数据位于data对象中。您有两种选择：

选项1：返回数据对象中的数据，如下所示：

return jsonify({'data': meas})

选项2：使用ajax.dataSrc选项告诉数据表在何处查找数据，例如：

$('#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}
   ]

只需添加更多具有相同字典键的记录，您就会拥有一个真正的表。作为一个 listOfDicts 并且你会被设置。

简单的DataTables烧瓶

2 个答案: