具有不同数据源烧瓶的多个数据表，ajax

Question

我有 2 个数据table，我这样填充一个

{% block scripts %}
<script>
    $(document).ready(function () {
      $('#data').DataTable({
        ajax: '/api/data',
        columns: [
          {data: 'PR Number'},
          {data: 'Short Description'},
          {data: 'PR Text'},
          {data: 'Developer Scratchpad'},
          {data: 'Final Response'},
          {data: 'Rating'},
          { sortable: false,
            "render": function(data, type, row, meta) {
                return '<a href="http://webtac.industrysoftware.automation.siemens.com/webpr/webpr.php?objtype=shortcut&startlink=view&startoption=reuse_last_session&startdata='+ row['PR Number'] +'"  target="_blank">Show PR in WebTac</a>';
              }
            },
          { sortable: false,
            "render": function(data, type, row, meta) {
                return '<a href="' + window.location.origin + '/details/' + row['PR Number'] +'" class="btn btn-outline-success">Show additional details</a>';
              }
            }
        ],
      });
    });

</script>
{% endblock %}

当我想再做一个这样的时候

{% block scripts %}
<script>
    $(document).ready(function () {
      $('#dataDetails').DataTable({
        "ajax": {
        "url": '/api/dataDetails',
        "dataSrc": ""
        },
        "columns": [
          {dataDetails: 'PR id'},
          {dataDetails: 'Author'},
          {dataDetails: 'Date'},
          {dataDetails: 'Description'},
          {dataDetails: 'File name'},
          {dataDetails: 'Reviewer'},
          {dataDetails: 'Story id'}
        ],
      });
    });

</script>
{% endblock %}

它给我以下错误

DataTables 警告：tableid=dataDetails - 无法重新初始化 DataTable。有关此错误的详细信息，请参阅 http://datatables.net/tn/3

关于如何使具有不同数据源的两个数据table在同一个应用程序中工作有什么想法吗？谢谢

Answer 1

正如我之前解释的，我假设您对同一个 ID #dataDetails 使用了两次 DataTables(...) 命令。因此没有必要绕过该命令，只是为了避免使用相同的 id 调用它两次。

在下面的示例中，您可以看到可以使用多个 table，前提是每个 id 仅与 DataTables(...) 命令一起使用一次。
第一个调用引用 ID 为 #table-1 的 table，第二个调用引用 ID 为 #table-2.

的 table

from flask import (
    Flask,
    jsonify,
    render_template
)

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/api/data1')
def api_data1():
    data = [
        {
            'PR Number': i,
            'Short Description': 'Your description here.'
        } for i in range(10)
    ]
    return jsonify(data=data)

@app.route('/api/data2')
def api_data2():
    data = [
        {
            'PR id': (i + 1),
            'Author': f'Author-{i + 1}'
        } for i in range(20)
    ]
    return jsonify(dataDetails=data)

<!DOCTYPE html>
<html>
  <head>
    {% block head %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %} - Example</title>
    {% endblock %}
  </head>
  <body>
    {% block content %}{% endblock %}
    {% block scripts %}{% endblock %}
  </body>
</html>

{% extends "layout.html" %}

{% block title %}Index{% endblock %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
{% endblock %}

{% block content %}
<table id="table-1" style="width: 100%">
  <thead>
    <tr>
      <th>Number</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<table id="table-2" style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Author</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
{% endblock content %}

{% block scripts %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $('#table-1').DataTable({
      ajax: '/api/data1',
      columns: [
        { data: 'PR Number' },
        { data: 'Short Description' },
      ]
    });

    $('#table-2').DataTable({
      ajax: {
        url: '/api/data2',
        dataSrc: 'dataDetails'
      },
      columns: [
        { data: 'PR id' },
        { data: 'Author' },
      ],
    });
  });
</script>
{% endblock %}

具有不同数据源烧瓶的多个数据表，ajax

Multiple datatables with different datasources flask, ajax

javascript

jquery

ajax

flask

jinja2