Search code examples
jqueryhtmltablesorter

Unable to run Jquery Tablesorter Plug-in


I have spend over an hour trying to figure out what's wrong here. I see the HTML table when I load the page on a browser from my local server, but I can't do any sorting and the table itself looks nothing like the example at the Tablesorter website.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-latest.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.js"></script> 
</head>
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 
</html>

Solution

  • You're missing this piece

    $(document).ready(function() 
        { 
            $("#myTable").tablesorter(); 
        } 
    );
    

    From: http://tablesorter.com/docs/