我有一个flask Web应用程序，它带有一个json文件，该文件具有要在引导表中显示的数据。我已经尝试了很多事情，但是无法将数据加载到表中。仅显示表头。
这是我的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tools</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
{% extends "template.html" %}
{% block content %}
<h1>Recon</h1>
<table data-toggle="table" class="display table table-bordered" data-url="static/tools.json" data-height="299">
<thead>
<tr>
<th data-field="Name">Name</th>
<th data-field="Description">Description</th>
<th data-field="Link">Data Link</th>
<th data-field="Language">Language</th>
<th data-field="Maintained">Maintained</th>
<th data-field="Stars">Stars</th>
<th data-field="Author">Author</th>
</tr>
</thead>
</table>
{% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
</body>
</html>
这是我的json数据的示例
[
{
"id": "1",
"name": "Inspy",
"description": "A python based LinkedIn enumeration tool",
"link": "https://github.com/leapsecurity/InSpy",
"language": "Python",
"maintained": "No",
"stars": "348",
"author": "Leap Security"
},
{
"id": "2",
"name": "AWSBucketDump",
"description": "Security Tool to Look For Interesting Files in S3 Buckets",
"link": "https://github.com/jordanpotti/AWSBucketDump",
"language": "Python",
"maintained": "No",
"stars": "889",
"author": ""
}
]
请将JSON键与数据字段属性进行匹配。所有键都应小写。将所有键更改为小写之后，我将数据放入表中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
</head>
<body>
<h1>Recon</h1>
<table id="table" data-toggle="table" class="display table table-bordered" data-url="static/tools.json" data-height="299">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="description">Description</th>
<th data-field="link">Data Link</th>
<th data-field="language">Language</th>
<th data-field="maintained">Maintained</th>
<th data-field="stars">Stars</th>
<th data-field="author">Author</th>
</tr>
</thead>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
</body>
</html>