Django - HTML table issue (probably with for loop)

I want to use dataTables in my HTML template in Django. .html file:

<!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>

The JavaScript (that would affect the headers of the table) doesn't seem to run because the headers are not clickable (for sorting for instance). Current weblink of what's being displayed (before it gets fixed...): http://texouze.pythonanywhere.com/fantasy/teams/

When I run a syntax validation (using TextMate), it spits out the following error (followed by a fatal error at the same location):

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>↩

Please pardon my ignorance if I am using the wrong terminology somewhere, I am very new at this.

{% extends %} tag must be the first line in the template file.

rewrite like this

{% 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 %}
Вернуться на верх