CODEWITHSUNDEEP
javascriptjquerytablesorter
user1579557
user1579557

Reputation: 393

tablesorter not taking effect

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

Page displays html table properly but is not sortable nor can I click the THEAD's What am I missing? I did read all the jquery docs. I checked that the js files mentioned in the src exist at the specified locations. Thank you for helping the js newbie.

Upvotes: 0

Views: 513

Answers (1)

Raunak Kathuria
Raunak Kathuria

Reputation: 3215

Adding it as answer as it is long explanation if it does not fix it let me know I will remove it

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

if you are loading from external resources then the problem with this syntax is that

It will not load code.jquery.com/jquery-1.9.0.js from code.jquery.com because it will check jquery-1.9.0.js in folder code.jquery.com in directory same as your html file

So use this syntax 

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

if you are testing locally then do 

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>; // include protocol

For your earlier comment to include syntax like this

<script type="text/javascript" src="/mnt/project/static/jquery/src/jquery-latest.js"></script>

The '/' at front means its absolute path. Just remove the slash to load from relative path.

Check this code it is working fine

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

Upvotes: 3

Related Questions