我想在 Django 的 HTML 模板中使用 dataTables。 .html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<title>FPL projections - Team list</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<style>
section{
width: 70%;
margin: 30px auto;
}
#teamTable th, #teamTable td{
border: 1px solid #ccc;
text-align: left;
}
#teamTable thead {
background: #f2f2f2;
}
</style>
</head>
<body>
<section>
{% extends "fantasy_menu.html" %}
{% block content %}
<h1>Team List</h1>
<table id="teamTable" width="100%">
<thead>
<tr>
<th><strong>Name</strong></th>
<th>Home for</th>
<th>Home ag</th>
<th>Away for</th>
<th>Away ag</th>
<th>opp1</th>
<th>opp2</th>
<th>opp3</th>
<th>opp4</th>
<th>opp5</th>
</tr>
</thead>
<tbody>
{% for team in team_list %}
<tr>
<td><a href="{% url 'fantasy:team' team.ref_id %}"><strong>{{team.name}}</strong></a>
({{team.ref_id}})
</td>
<td>{{team.avg_goal_for_home}}</td>
<td>{{team.avg_goal_ag_home}}</td>
<td>{{team.avg_goal_for_away}}</td>
<td>{{team.avg_goal_ag_away}}</td>
<td>{{team.opp1}}</td>
<td>{{team.opp2}}</td>
<td>{{team.opp3}}</td>
<td>{{team.opp4}}</td>
<td>{{team.opp5}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready( function () {
$('#teamTable').DataTable();
} );
</script>
<br />
<br />
<p><a href="{% url 'fantasy:player_list' %}">Player projections</a></p>
<p><a href="{% url 'fantasy:index' %}">Back to main page</a></p>
{% endblock %}
{% block footer %}
{% endblock %}
</section>
</body>
</html>
JavaScript（会影响表的标题）似乎没有运行，因为标题不可单击（例如用于排序）。当前所显示内容的网页链接（在修复之前......）：
http://texouze.pythonanywhere.com/fantasy/teams/
当我运行语法验证（使用 TextMate）时，它会输出以下错误（随后在同一位置出现致命错误）：
Error: Misplaced non-space characters inside a table.
From line 49, column 16; to line 51, column 7
<tbody>↩ {% for team in team_list %}↩ <tr>↩
如果我在某个地方使用了错误的术语，请原谅我的无知，我对此很陌生。
{% extends %}像这样重写
{% extends "fantasy_menu.html" %}
{% block content %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>FPL Projections - Team List</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<style>
section {
width: 70%;
margin: 30px auto;
}
#teamTable th, #teamTable td {
border: 1px solid #ccc;
text-align: left;
}
#teamTable thead {
background: #f2f2f2;
}
</style>
</head>
<body>
<section>
<h1>Team List</h1>
<table id="teamTable" width="100%">
<thead>
<tr>
<th><strong>Name</strong></th>
<th>Home for</th>
<th>Home ag</th>
<th>Away for</th>
<th>Away ag</th>
<th>opp1</th>
<th>opp2</th>
<th>opp3</th>
<th>opp4</th>
<th>opp5</th>
</tr>
</thead>
<tbody>
{% for team in team_list %}
<tr>
<td>
<a href="{% url 'fantasy:team' team.ref_id %}">
<strong>{{ team.name }}</strong>
</a> ({{ team.ref_id }})
</td>
<td>{{ team.avg_goal_for_home }}</td>
<td>{{ team.avg_goal_ag_home }}</td>
<td>{{ team.avg_goal_for_away }}</td>
<td>{{ team.avg_goal_ag_away }}</td>
<td>{{ team.opp1 }}</td>
<td>{{ team.opp2 }}</td>
<td>{{ team.opp3 }}</td>
<td>{{ team.opp4 }}</td>
<td>{{ team.opp5 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function () {
$('#teamTable').DataTable();
});
</script>
<p><a href="{% url 'fantasy:player_list' %}">Player projections</a></p>
<p><a href="{% url 'fantasy:index' %}">Back to main page</a></p>
</section>
</body>
</html>
{% endblock %}