<!DOCTYPE html>
<html>
<head>
<body>
<script type="text/javascript" src="/mnt/project/static/jquery/src/jquery-latest.js"></script>
<script type="text/javascript" src="/mnt/project/static/jquery/src/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
{% if logs: %}
<table id="myTable" class="tablesorter" border=1>
<thead>
<tr><th>Hostname</th><th>Service</th><th>Status</th><th>Monitored?</th><th>Date</th></tr>
</thead>
<tbody>
# logs is a list sent from flask file
# render_template("logs.html",logs=logs)
{% for log in logs%}
<tr>
<td>{{log.split("#")[1]}}</td>
<td>{{log.split("#")[2]}}</td>
<td>{{log.split("#")[3]}}</td>
<td>{{log.split("#")[4]}}</td>
<td>{{log.split("#")[5]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<h3>Sorry! Unable to Retrieve Logs!</h3>
{% endif %}
</body>
</html>
页面正确显示 html 表，但不可排序，也无法单击 THEAD 的“我缺少什么？”我确实阅读了所有 jquery 文档。我检查了 src 中提到的 js 文件是否存在于指定位置。感谢您对 js 新手的帮助。
最佳答案
将其添加为答案，因为它是很长的解释，如果它不能修复它，请告诉我我将删除它
<script src="code.jquery.com/jquery-1.9.0.js"></script>;
如果您从外部资源加载，那么此语法的问题在于
它不会从code.jquery.com加载code.jquery.com/jquery-1.9.0.js，因为它会检查与您的html目录相同的文件夹code.jquery.com中的jquery-1.9.0.js文件
所以使用这个语法
<script src="//code.jquery.com/jquery-1.9.0.js"></script>;
如果您在本地测试，则执行
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>; // include protocol
让您之前的评论包含这样的语法
<script type="text/javascript" src="/mnt/project/static/jquery/src/jquery-latest.js"></script>
前面的“/”表示绝对路径。只需删除斜杠即可从相对路径加载。
检查此代码是否工作正常
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<style>
/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
</style>
</head>
<body>
<table id="myTable" class="tablesorter" border=1>
<thead>
<tr><th>Hostname</th><th>Service</th><th>Status</th><th>Monitored?</th><th>Date</th></tr>
</thead>
<tbody>
<tr>
<td>Hostname 2</td>
<td>Service 1</td>
<td>Status 3</td>
<td>Monitored 1</td>
<td>1</td>
</tr>
<tr>
<td>Hostname 1</td>
<td>Service 2</td>
<td>Status 2</td>
<td>Monitored 2</td>
<td>2</td>
</tr>
<tr>
<td>Hostname 3</td>
<td>Service 3</td>
<td>Status 3</td>
<td>Monitored 3</td>
<td>3</td>
</tr>
<tr>
<td>Hostname 4</td>
<td>Service 4</td>
<td>Status 4</td>
<td>Monitored 4</td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
关于javascript - 表排序器未生效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20782233/