尝试在 Django 模板中使用表排序 JQuery 插件。尝试了 jquery 和 tablesorter 文件的不同来源。似乎没有与他们中的任何一个一起工作。模板页面上没有任何变化。我尝试排序的真实表是 tab2。创建了一个简单的 tab1 仅用于测试。也不适用于这张 table 。尝试遵循这些说明 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>关于javascript - Jquery tablesorter 插件在 Django 模板中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53923399/