Задать вопрос
@Dr-Caligari
javascript

JS Tablesorter не работает на сервере Django, но при этом работает при открытии шаблона как HTML файла. Куда копать?

Суть в заголовке. Верхнюю таблицу добавил временно для удобного и простого тестирования. Собствественно, если открыть этот template.html как файл то сортировка работает, при запуске сервера и переходе на URL этого шаблона никаких признаков работающей сортировки нет. Есть предположения? Код шаблона в спойлере. Если нужно что-то еще из файловой структуры Django выложить, то говорите.
Документация на sorter - https://mottie.github.io/tablesorter/docs/

Код


{% 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 %}
  • Вопрос задан
  • 134 просмотра
7 комментариев
Подписаться 1 Простой 7 комментариев
Пригласить эксперта
Ответы на вопрос 1
syschel
@syschel
freelance/python/django/backend 
{% extends 'base.html' %}
    {% load static %}
    {% block content %}
        <head>

Вы говорите Джанге, что данный шаблон подгружается внутри файла 'base.html'. Где по канонам должен быть весь "сквозной" для всех страниц код, включая открывающийся и закрывающийся body.
Но ниже, я вижу у вас тег '<head>'. Это как вообще? У вас в 'base.html' чтоли только открытие и закрытие тега HTML?
Думаю вся проблема в этом. Когда вы открываете "в лоб", как файл, только текущий шаблон, то у вас с учётом "мусора от Джанги", срабатывает кое-как как html файл. Но когда вы грузите через джангу, там её шаблонизатор всё собирает из разрозненных файлов, которые вы прописывали подгружать и собирает готовый html. А так как у вас одно и тоже из служебных тегов, да ещё вступающее в конфликт очень сильно. То наверно из этого и вытекает, что ничего не работает.

З.Ы. В блок {% block content %}, нужно выводить только содержимое тега body, никаких head там не должно быть. В саб шоблонах вообще, по сути, должны быть только "куски" вёрстки, которые уникальны для текущей страницы/модуля, а не всё сразу.
spoiler
Очень больно смотреть, как люди кушают макароны ботинками, только потому, что не прочитали инструкцию. :`-(
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
25 апр. 2024, в 05:29
25000 руб./за проект
Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот
25 апр. 2024, в 04:38
10000 руб./за проект
Ещё заказы