Плагин Jquery TableSorter не работает в шаблоне Django - PullRequest
Новая
       27

Плагин Jquery TableSorter не работает в шаблоне Django

0 голосов
/ 25 декабря 2018

Попытка использовать плагин сортировки таблиц JQuery в шаблоне Django.Перепробовал разные источники для файлов jquery и tablesorter.Похоже, не работал ни с одним из них.Просто ничего не меняется на странице шаблона.Реальная таблица, которую я пытаюсь отсортировать - это tab2.Создан простой tab1 только для тестирования.Не работал с этой таблицей также.Пытался следовать этим инструкциям https://mottie.github.io/tablesorter/docs/. Скачал .js файлы с этой страницы.До этого у меня не было опыта работы с JS и JQuery. 

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

{% block content %}
    <h4>Players</h4>
    <head>
      <script type="text/javascript" src="{% static 'players/jquery-latest.min.js' %}"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/dragtable.mod.min.css"></script>

      <script type="text/javascript">
        $(function() {
        $("#tab1").tablesorter();
        });
      </script>

    </head>
    <body>

      <table id="tab1" 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">
  <table id="tab2" class="table table-hover table-bordered tablesorter">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Height</th>
        <th>Weight</th>
        <th>Birth Date</th>
        <th>Draft Pick No</th>
        <th>Games</th>
        <th>Goals</th>
        <th>Assists</th>
        <th>Shots</th>
        <th>Hits</th>
        <th>Faceoffs Won</th>
        <th>Blocks</th>
      </tr>
    </thead>
    {% for player in players %}

    <tbody>
      <tr>
      <td><a href="{% url 'player-detail' player.playerName|slugify player.playerId %}">{{ player.playerName }}</td>
      <td>{{ player.playerPositionCode }}</td>
      <td>{{ player.playerHeight }}</td>
      <td>{{ player.playerWeight }}</td>
      <td>{{ player.playerBirthDate }}</td>
      <td>{{ player.playerDraftOverallPickNo }}</td>
      <td>{{ player.gamesPlayed }}</td>
      <td>{{ player.goals }}</td>
      <td>{{ player.assists }}</td>
      <td>{{ player.shots }}</td>
      <td>{{ player.hits }}</td>
      <td>{{ player.blockedShots }}</td>
      <td>{{ player.faceoffsWon }}</td>
    {% endfor %}

      </tr>
    </tbody>
  </table>
</div>
    </body>

{% endblock content %}

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Некоторое время назад удалось найти источник проблемы.

У меня были скрипты Bootstrap JS в шаблоне base.html.И JQuery в частности.Таким образом, это противоречило импорту jQuery в дочернем шаблоне. 

<!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

С этой удаленной строкой табличный сортировщик был запущен и работает. 

<!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Еще одна вещь, которую стоит отметить, это то, что вы не должныне помещайте теги head и body в {% block content %}. Вы бы предпочли разные блоки для сценариев, заголовка и содержимого страницы.

Базовый шаблон 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
   <title>
     {% block title %} {% endblock title %}
   </title>
     {% block scripts %} {% endblock scripts %}
  </head>
  <body>
   {% block content %} {% endblock content %}
  </body>

Дочерний шаблон: 

{% extends 'base.html' %}

{% block title %}
  Players - NHL stats tracker
{% endblock title %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.js"></script>
{% endblock scripts %}

{% block content %}
<table id="tab1" class="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>
{% endblock content %}
0 голосов
/ 25 декабря 2018

Как сообщается в документации , вы забыли включить библиотеки. 

$("#tab1").tablesorter();
<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 src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>


<table id="tab1" 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>
...