当我在Pycharm中运行时，我的html加载得很好，包括数据但是当我尝试在烧瓶中运行它时，它似乎无法找到表的数据并呈现表但是说＆＃ 34;装载＆＃34;数据应该在哪里。
获取数据的行是：
"ajax": "../ajax/data/objects2.txt",
我试图使用＆＃34; DataTables＆＃34;这样我就可以在https://datatables.net/examples/api/row_details.html中显示表格中的子行。
项目目录结构是：
flaskTest
+-- ajax
| +-- data
| +-- object2.txt
+-- resources
| +-- details_close.png
| +-- details_open.png
+-- templates
| +-- index.html
+-- flaskTest.py
完整性details_close.png和details_open.png位于 https://github.com/DataTables/DataTables/tree/master/examples/resources
-----
flaskTest\flaskTest.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
------
flaskTest\templates\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Datatables Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<style>
td.details-control {
/*background: url('details_open.png') no-repeat center center;*/
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
/*background: url('details_close.png') no-repeat center center;*/
background: url('../resources/details_close.png') no-repeat center center;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<table id="example" class="display compact" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script>
/* Formatting function for row details - modify as you need */
function format ( d ) {
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<thead>'+
'<tr>'+
'<td>Full name:</td>'+
'<td>Extension number:</td>'+
'</tr>'+
'</thead>'+
'<tbody>' +
'<tr>' +
'<td>'+d.name+'</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'</tbody>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
// "ajax": "objects2.txt",
"ajax": "../ajax/data/objects2.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
</script>
</body>
</html>
------
ajax\data\object2.txt
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}
]
}
-----