Javascript Jquery tablesorter插件在Django模板中不起作用
尝试在Django模板中使用表排序JQuery插件。尝试了jquery和tablesorter文件的不同来源。似乎和他们都不合作。模板页面上没有任何更改。我试图排序的实际表是Javascript Jquery tablesorter插件在Django模板中不起作用,javascript,jquery,html,django,tablesorter,Javascript,Jquery,Html,Django,Tablesorter,尝试在Django模板中使用表排序JQuery插件。尝试了jquery和tablesorter文件的不同来源。似乎和他们都不合作。模板页面上没有任何更改。我试图排序的实际表是tab2。创建了一个简单的tab1用于测试。这张桌子也不能用。我试着按照这些指示去做。已从此页面下载.js文件。以前没有任何使用JS和JQuery的经验 {% extends 'base.html' %} {% load static %} {% block content %} <h4>Players
tab2
。创建了一个简单的tab1
用于测试。这张桌子也不能用。我试着按照这些指示去做。已从此页面下载.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 %}
{%extends'base.html%}
{%load static%}
{%block content%}
球员
$(函数(){
$(“#表1”).tablesorter();
});
月
储蓄
一月
$100
二月
$80
总和
$180
名称
位置
高度
重量
出生日期
选秀编号
游戏
目标
协助
镜头
击打
对决获胜
阻碍
{玩家中的玩家为%}
{{player.playerName}
{{player.playerPositionCode}
{{player.playerHeight}
{{player.playerWeight}
{{player.playerBirthDate}
{{player.playerDraftOverallPickNo}
{{player.gamesPlayed}
{{player.goals}}
{{player.assesss}}
{{player.shots}
{{player.hits}
{{player.blockedShots}}
{{player.faceoffswen}
{%endfor%}
{%endblock内容%}
如中所述,您忘记包含库
$(“#tab1”).tablesorter()代码>
月
储蓄
一月
$100
二月
$80
总和
$180
如中所述,您忘记包含库
$(“#tab1”).tablesorter()代码>
月
储蓄
一月
$100
二月
$80
总和
$180
不久前,我们已经找到了问题的根源
我已经在'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>
子模板:
{% 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 %}
{%extends'base.html%}
{%block title%}
玩家-NHL统计跟踪
{%endblock title%}
{%block scripts%}
{%endblock脚本%}
{%block content%}
月
储蓄
一月
$100
二月
$80
总和
$180
{%endblock内容%}
不久前,我们已经找到了问题的根源
我已经在'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>
子模板:
{% 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 %}
{%extends'base.html%}
{%block title%}
玩家-NHL统计跟踪
{%endblock title%}
{%block scripts%}
{%endblock脚本%}
{%block content%}
月
储蓄
一月
$100
二月
$80
总和
$180
{%endblock内容%}
#myTable的表id错误:您只有一个id为tab1的表,另一个id为tab1的表=tab2@gaetanoM,很抱歉,这是一个复制粘贴错误,更改了此id,但在到处更改之前复制到了SO。多次检查id。在编辑器窗口和网页中#myTable是错误的表id:您只有一个id为tab1的表和一个id为tab1的表=tab2@gaetanoM,很抱歉,这是一个复制粘贴错误,更改了此id,但在到处更改之前复制到了SO。多次检查id。有了编辑器窗口和一个网页,我并没有完全忘记包括,包括了库,但可能src是错误的。现在我想知道我的模板中tablesorter()的位置是否有问题,因为在我复制了你答案中的所有库之后,它就不起作用了。正如我在你的回答中看到的,它作为一个代码窃贼运行得非常完美。我已经在我的模板中用简单的警报('Hello')
测试了JS。它起作用了。这里的位置没有问题。我刚刚将代码段与表和脚本一起放在TEST.html文件中。它工作得很好。当我以html文件的形式打开我的players.html
模板时,它也可以工作,但在启动服务器并通过访问页面后,它就不起作用了。我并没有完全忘记包括,包括了库,但可能src的错误。现在我想知道我的模板中tablesorter()的位置是否有问题,因为在我复制了你答案中的所有库之后,它就不起作用了。正如我在你的回答中看到的,它作为一个代码窃贼运行得非常完美。我已经在我的模板中用简单的警报('Hello')
测试了JS。它起作用了。这里的位置没有问题。我刚刚将代码段与表和脚本一起放在TEST.html文件中。它工作得很好。当我以html文件的形式打开我的players.html
模板时,它也可以工作,但在启动服务器并通过访问页面后,它就不工作了。