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.py：

@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();
    });
}

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

1 个答案: