尝试使用表Django模板排序的jQuery插件。尝试了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 %}
正如documentation报道你忘了,包括图书馆。
$("#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>
已经能够前段时间找到问题的根源。
我在“base.html文件”模板有引导JS脚本。和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>
有了这一行取出的tablesorter启动和运行。
<!-- 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 %}