如何将大量数据从烧瓶传递到模板？答案

【问题标题】：How to pass massive data from flask to template?如何将大量数据从烧瓶传递到模板？
【发布时间】：2020-09-26 22:45:33
【问题描述】：

我有从数据库中获取的数据，数据大约有 30,000 多条记录，当我用这些数据渲染模板时，模板非常慢，那么传递大量数据并显示的最佳方法是什么模板。

这是我的代码。

route.py

@app.route('/index', methods=['GET', 'POST'])
def index():
  asset_table = asset.query.all()
  return render_template('index.html', asset_table=asset_table)

index.html

 <table class="table table-hover table-sm table-striped" id="asset_table">
    <thead class="thead-dark">

        <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        </tr>
    </thead>
    <tbody>

            {% for asset in asset_table %}

                    <tr>
                    <td>{{ asset.asset_id }}</td>
                    <td>{{ asset.asset_name }}</td>
                    </tr>
            {% endfor %}

    </tbody>
    </table>

<script>
$(document).ready(function () {

            $('#asset_table').DataTable({
                "scrollX": true,
            });
            $('.dataTables_length').addClass('bs-select');



    });

</script>

models.py

from application import db

class asset(db.Model):
    __tablename__ = 'asset'
    asset_id = db.Column(db.String(30), primary_key=True)
    asset_name = db.Column(db.String(30))

【问题讨论】：

您要在屏幕上显示 30,000 条记录？将这些分成几批，比如 1,000 条记录，对你有用吗？用户实际上是在屏幕上使用它们还是只是将它们下载到 csv 或 excel 文件中？
@Ben 在屏幕上使用，模板将有输入字段用于搜索查询以获取用户想要的数据。
@Ben 我使用 DataTables 插件来实现这些数据，限制行记录和分页。我刚刚更新了我的代码。
你为什么不试试服务器端处理datatables.net/examples/data_sources/server_side？
@Kartikeya Sharma 我想这就是我要找的东西，但是云请给我展示我通过服务器端处理将数据传递到数据表的示例示例。

标签： python flask datatables sqlalchemy jinja2

【解决方案1】：

我会使用一个名为 sqlalchemy-datatables 的库，它现在有点旧，但它可以工作。

代码应如下所示：

烧瓶代码

from datatables import ColumnDT, DataTables

@app.route('/index', methods=['GET'])
def index():
  """
  Code which renders the index page
  """
  return render_template('index.html')

@app.route('/data', methods=['GET'])
def data():
  """
  Returns data for the index page.
  GET:
        params:
            Please learn about the other parameters here:
                https://datatables.net/manual/server-side#Sent-parameters
        responses:
            Please learn about the response parameters here:
                https://datatables.net/manual/server-side#Returned-data
  """
  columns = [
    ColumnDT(
       asset.asset_id,
       mData="ID" 
     ),
    ColumnDT(
       asset.asset_name,
       mData="Name"
     )
              ]
  query = db.session.query().select_from(asset)
  params = request.args.to_dict()
  rowTable = DataTables(params, query, columns)
  return jsonify(rowTable.output_result())

HTML/Jquery 代码

<table class="table table-hover table-sm table-striped" id="asset_table">
    <thead class="thead-dark">
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody></tbody>
    </table>

<script>
$(document).ready(function () {

            $('#asset_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ url_for('data')}}",
                dom: 'Bflrtip',
                columns: [
                        { "data": "ID" },
                        { "data": "Name" },]
            });
    });

</script>

干杯！

【讨论】：