使用 jquery 函数更新 Jinja 模板中的表数据答案

【问题标题】：Updating table data inside Jinja template with jquery function使用 jquery 函数更新 Jinja 模板中的表数据
【发布时间】：2017-10-02 10:34:25
【问题描述】：

第一次加载我的页面时，表格生成如下（我迭代 blocks 作为请求的一部分传递）：

<div class="container">
<table class="table table-striped">
        <thead>
          <tr>
            <th>Index</th>
            <th>Previous Hash</th>
            <th>Timestamp</th>
            <th>Data</th>
            <th>Hash</th>
          </tr>
        </thead>
        <tbody>
        {% for block in blocks %}
          <tr>
            <th scope="row">{{block.index}}</th>
            <td>{{block.previous_hash[0:10]}}</td>
            <td>{{block.timestamp}}</td>
            <td>{{block.data}}</td>
            <td>{{block.hash[0:10]}}</td>
          </tr>
          {% else %}
          <li><em>Unbelievable.  No entries here so far</em>
        {% endfor %}
        </tbody>
      </table>
</div>

现在我希望在不刷新 jquery 函数中的页面的情况下重新加载该表。我怎么做？

附：我在更新文本字段等简单元素时没有问题：

$('#banner').text('new banner text')

但是这个表的东西很混乱。

【问题讨论】：

标签： jquery flask jinja2

【解决方案1】：

这取决于您要如何处理。一种方法是让视图返回包含表格数据的 html 页面：

<tr>
    <th scope="row">{{block.index}}</th>
    <td>{{block.previous_hash[0:10]}}</td>
    <td>{{block.timestamp}}</td>
    <td>{{block.data}}</td>
    <td>{{block.hash[0:10]}}</td>
</tr>

您使用以下方式发送数据：

 return jsonify({"result": render_template('row.html', block=block)})

然后，您可以使用您的 jquery 代码来更新表并将新行附加到它。

另一种方法是一遍又一遍地获取整个表，同时抛出新数据。顺便说一句，我会并且正在使用第一种方式。

【讨论】：