Multiple datatables with different datasources flask, ajax-CodePudding

I have 2 datatables, I populate one like this

{% 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']  '" >Show additional details</a>';
              }
            }
        ],
      });
    });

</script>
{% endblock %}

and when I want to make another one like this

{% 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 %}

It gives me the following error

DataTables warning: table id=dataDetails - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Any ideas about how could I make two datatables with different datasources to work in the same application? Thanks.

CodePudding user response：

As I explained before, I assume that you use the DataTables(...) command twice for the same id #dataDetails. It is therefore not necessary to bypass the command, but only to avoid calling it twice with the same id.

In the example below you can see that multiple tables can be used provided that each id is used only once in conjunction with the DataTables(...) command.
The first call refers to the table with the id #table-1 and the second to the one with the id #table-2.

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 %}