我有 2 個資料表，我像這樣填充一個
{% 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 %}
當我想做另一個這樣的時候
{% 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 警告：table id=dataDetails - 無法重新初始化 DataTable。有關此錯誤的更多資訊，請參閱http://datatables.net/tn/3
關于如何使具有不同資料源的兩個資料表在同一個應用程式中作業的任何想法？謝謝。
uj5u.com熱心網友回復：
正如我之前解釋的，我假設您DataTables(...)對同一 id 使用該命令兩次#dataDetails。因此沒有必要繞過該命令，而只是為了避免使用相同的 id 呼叫它兩次。
在下面的示例中，您可以看到可以使用多個表，前提是每個 id 僅與DataTables(...)命令一起使用一次。
第一個呼叫是指帶有 id 的表，#table-1第二個呼叫是指帶有 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 %}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/483386.html
標籤：javascript jQuery 阿贾克斯 烧瓶 神社2