Django - проблема с HTML-таблицами (возможно, с циклом for)

Я хочу использовать dataTables в моем HTML шаблоне в Django. Файл .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 %}
Вернуться на верх