JS Tablesorter doesn't work on Django server, but it does work when the template is opened as an HTML file. Where to dig?

D

Dr-Caligari2018-12-29 11:54:11

JavaScript

Dr-Caligari, 2018-12-29 11:54:11

The point is in the title. The upper table was added temporarily for convenient and simple testing. Actually, if you open this template.html as a file, then sorting works, when you start the server and go to the URL of this template, there are no signs of a working sorting. Any suggestions? Template code in the spoiler. If you need to lay out something else from the Django file structure, then say it.
Sorter documentation - https://mottie.github.io/tablesorter/docs/

The code

{% extends 'base.html' %}
    {% load static %}

    {% block content %}
        <head>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.default.css">
          <script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
          <script type="text/javascript">
          $(function() {
            $("#tab2").tablesorter();
          });
          </script>
        </head>
        <body>
            <form action="/search/" method="get">
                <input type="text" name="q">
                <input type="submit" value="Search">
            </form>
    <table id="tab2" class="table table-hover table-bordered tablesorter">
    <thead>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
    </tr>
    </tbody>
    <tr>
        <td>Sum</td>
        <td>$180</td>
    </tr>
</table>
      <div class="container">
        <br>
        <!-- GOALIES       -->
        <h4>Goalies</h4>
        <table id="tab3" class="table table-hover table-bordered tablesorter">
          <thead class=thead-light>
            <tr>
              <th>Name</th>
              <th>Position</th>
              <th>Team</th>
              <th>Height</th>
              <th>Weight</th>
              <th>Born</th>
              <th>Drafted</th>
              <th>Year</th>
              <th>Games</th>
              <th>Wins</th>
              <th>Losses</th>
              <th>OTL</th>
              <th>GAA</th>
              <th>SV %</th>
              <th>SV</th>
              <th>SHO</th>
            </tr>
          </thead>

          {% for goalie in goalies %}
          <tbody>
            <tr>
            <td><a href="{% url 'player_detail' goalie.playerName|slugify goalie.playerId %}">{{ goalie.playerName }}</td>
            <td>{{ goalie.playerPositionCode }}</td>
            <td>{{ goalie.playerTeamsPlayedFor }}</td>
            <td>{{ goalie.playerHeight }}</td>
            <td>{{ goalie.playerWeight }}</td>
            <td>{{ goalie.playerBirthDate }}</td>
            <td>{{ goalie.playerDraftOverallPickNo }}</td>
            <td>{{ goalie.playerDraftYear }}</td>
            <td>{{ goalie.gamesPlayed }}</td>
            <td>{{ goalie.wins }}</td>
            <td>{{ goalie.losses }}</td>
            <td>{{ goalie.otLosses }}</td>
            <td>{{ goalie.goalsAgainstAverage|floatformat:2 }}</td>
            <td>{{ goalie.savePctg|floatformat:3 }}</td>
            <td>{{ goalie.saves }}</td>
            <td>{{ goalie.shutouts }}</td>
          {% endfor %}
            </tr>
          </tbody>
        </table>
        <br>

    <!-- SKATERS       -->
      <h4>Skaters</h4>
      <table id="tab2" class="table table-hover table-bordered tablesorter">
        <thead class=thead-light>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Team</th>
            <th>Height</th>
            <th>Weight</th>
            <th>Born</th>
            <th>Drafted</th>
            <th>Year</th>
            <th>Games</th>
            <th>Goals</th>
            <th>Assists</th>
            <th>Points</th>
            <th>+/-</th>
            <th>PIM</th>
            <th>Shots</th>
            <th>Hits</th>
            <th>Blocks</th>
            <th>FW</th>
            <th>PPP</th>
            <th>SHP</th>
            <th>TOI</th>
            <th>TOI PP</th>
            <th>TOI SHP</th>
          </tr>
        </thead>
        {% for player in skaters %}

        <tbody>
          <tr>
          <td><a href="{% url 'player_detail' player.playerName|slugify player.playerId %}">{{ player.playerName }}</td>
          <td>{{ player.playerPositionCode }}</td>
          <td>{{ player.playerTeamsPlayedFor }}</td>
          <td>{{ player.playerHeight }}</td>
          <td>{{ player.playerWeight }}</td>
          <td>{{ player.playerBirthDate }}</td>
          <td>{{ player.playerDraftOverallPickNo }}</td>
          <td>{{ player.playerDraftYear }}</td>
          <td>{{ player.gamesPlayed }}</td>
          <td>{{ player.goals }}</td>
          <td>{{ player.assists }}</td>
          <td>{{ player.points }}</td>
          <td>{{ player.plusMinus }}</td>
          <td>{{ player.penaltyMinutes }}</td>
          <td>{{ player.shots }}</td>
          <td>{{ player.hits }}</td>
          <td>{{ player.blockedShots }}</td>
          <td>{{ player.faceoffsWon }}</td>
          <td>{{ player.ppPoints }}</td>
          <td>{{ player.shPoints }}</td>
          <td>{{ player.timeOnIcePerGame }}</td>
          <td>{{ player.ppTimeOnIcePerGame }}</td>
          <td>{{ player.shTimeOnIcePerGame }}</td>
        {% endfor %}
          </tr>
        </tbody>
      </table>
    </div>
        </body>
    {% endblock content %}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander, 2018-12-30
@syschel

{% extends 'base.html' %}
    {% load static %}
    {% block content %}
        <head>

You are telling Junga that this template is loaded inside the ' base.html ' file. Where, according to the canons, there should be all the code "through" for all pages, including the opening and closing body .
But below, I see you have a ' <head> ' tag. How is that in general? Do you only have an opening and closing HTML tag in ' base.html '?
I think that's the whole problem. When you open "on the forehead" as a file, only the current template, then you, taking into account the "garbage from Dzhanga", work somehow like an html file. But when you load through django, there its template engine collects everything from scattered files that you ordered to load and collects the finished html. And since you have the same service tags, and even conflicting very strongly. It probably follows from this that nothing works.
Z.Y. In the {% block content %} block, only the content of the body tag should be displayed, no head should be there. In general, in sub-shoblones, in fact, there should be only "pieces" of layout that are unique for the current page / module, and not all at once.

spoiler

Очень больно смотреть, как люди кушают макароны ботинками, только потому, что не прочитали инструкцию. :`-(