CODEWITHSUNDEEP
javascriptjqueryhtmldjangotablesorter
edvard_munch
edvard_munch

Reputation: 275

Jquery tablesorter plugin does not work in Django template

Trying to use the table sorting JQuery plugin in the Django template. Tried different sources for jquery and tablesorter files. Didn't seem to work with any of them. Just nothing changes on the template page. The real table that I'm trying to sort is tab2. Created a simple tab1 just for testing. Didn't work with this table also. Tried to follow these instructions https://mottie.github.io/tablesorter/docs/. Downloaded .js files from this page. Didn't have any experience with JS and JQuery before.

{% 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 %}

Upvotes: 0

Views: 606

Answers (2)

edvard_munch
edvard_munch

Reputation: 275

Have been able to find the source of the problem while ago.

I've had Bootstrap JS scripts in the 'base.html' template. And jQuery in particular. So it was conflicting with the jQuery import in the child template.

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

With this line removed the tablesorter was up and running.

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

Another thing worth noting is that you shouldn't put head and body tags inside of a {% block content %} You'd rather have different blocks for scripts, title and the content of the page.

Base template

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

Child template:

{% 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 %}

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42054

As reported in the documentation you forgot to include the libraries.

$("#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>

Upvotes: 1

Related Questions