Flask：使用变量填充数据表，而不是文件

Question

您好我正在尝试使用Flask和Data Tables填充表格 - 并且快速完成。渲染整个html表太慢了，所以我尝试（并成功）使用ajax: url-to-file和deferRender: True。但是，我想通过传递数据和JavaScript或Ajax，以其他方式 - 没有文件。

我已经尝试了各种方法来填充表格，例如passing a url of another route，但没有结果。

我发现至少在模板中获取数据的唯一方法是通过以下方式。不幸的是，我无法完成填充表格的最后任务。

在views.py的路线：

    @main.route('/table_display_route')
    def table_display():
        # ...
        # creating df from session items
        # ...
        columns = df.columns # for a dynamically created table

        table_json = json.dumps(json.loads(df.to_json(orient='index')))

        return render_template('display.html', columns=columns, 
                                table_json=table_json)

table_json具有以下形式：

“1”：{“col1”：“atr1”，“col2”：“atr2”，...}，“2”：{...等...

然后display.html，仅渲染表头：

 ..
    <thead>
      <tr>
        {% for column in columns %}
          <th>{{ column }}</th>
        {% endfor %}
      </tr>
    </thead>
 ...

和脚本，看起来如下填充行，这是行不通的：

$('#display_table').find('table').DataTable( {
    data: {{ table_json }},
    // ... 
} );

有什么建议？

解决方案（根据选择的答案，微小的修改）：

views.朋友:

@main.route('/table_display_route')
def table_display():
    // .. building df from session

    # get table headers and rows
    columns = df.columns
    rows = df.to_json(orient='values')

    return render_template('display.html', columns=columns, rows=rows,...)

display.html：

...
<div id="display_table">
  <table class="cell-border" >
    <thead>
      <tr>
        {% for column in columns %}
          <th>{{ column }}</th>
        {% endfor %}
      </tr>
    </thead>
  </table>
</div>
...

脚本：

// set table as DataTable
var display_table = $('#display_table').find('table').DataTable({
    ...
    deferRender: true
});

function loadTable() {
    $.get('table_display_route', function(response, status){
        var data = {{ rows }};
        display_table.clear();

        Object.keys(data).forEach(function(key) {
            // fill row
            row = data[key]

            // append to table
            display_table.row.add(row);
        });

        // Update table -- make rows visible.
        display_table.draw();
    });
}

//execute function
loadTable();

Answer 1

如果你想使用DataTables和Flask，并且想要填写模板渲染，我建议你直接在HTML中加入一个表格模板，这是jinja2和Flask的首选，而不是通过javascript完成。因为您正在进行模板渲染，所以当使用或调用此路由时，HTML表将自动更新所需的任何json数据。以下是以下示例：

在views.py的路线

@main.route('/table_display')
def table_display():
    # ...
    # creating df from session items
    # ...
    columns = df.columns # for a dynamically created table

    table_d = df.to_json(orient='index')

    return render_template('display.html', columns=columns, 
                            table_data=table_d)

其中columns的数据结构是一个字符串（列）数组，而table_json的结构为"1": { "col1": "atr1", "col2": "atr2", ... }, "2": { ...etc...

在display.html布局

<table id="test-table" class="table display" cellspacing="0" width="100%">
    <thead>
        <tr>
            {% for c in columns %}
                <th scope="col">{{c}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for k, v in table_data.items() %}
            <tr>
                <td>{{v.col1}}</td>
                <td>{{v.col2}}</td>
                ...
                <td>{{v.colN}}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

并在text/javascript代码

var test_table = $('#test-table').DataTable();

编辑2018-09-11以反映评论

仅使用javascript而不使用模板渲染：

嗨，这个功能怎么样：

var test_table = $('#test-table').DataTable({deferRender: true});

function loadTable() {
    $.get('flask_route', function(response, status){
        var data = response['data'];
        test_table.clear();

        Object.keys(data).forEach(function(key) {
            // fill row
            row = []

            // append to table
            test_table.row.add(row);
        });

        // Update table -- make rows visible.
        test_table.draw();
    });
}