Question

<!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新手。

Answer 1

添加它作为答案，因为它是很长的解释，如果它没有解决它让我知道我将删除它

<script src="code.jquery.com/jquery-1.9.0.js"></script>;

如果您从外部资源加载，则此语法的问题是

它不会从code.jquery.com加载code.jquery.com/jquery-1.9.0.js，因为它会检查文件夹code.jquery.com中的jquery-1.9.0.js，目录与html相同文件

所以使用这个语法

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

tablesorter没有生效

1 个答案: