Jquery Tablesorter not working! What's wrong with that?

Asked 30/3, 2013 at 4:56 Answered 5/10, 2016 at 2:39

I'm new to Jquery and I'm trying to use Jquery Tablesorter plugin and I've tested it in a simple html file as below but it is not working. All I have seen in browser is only a plain table with no sorting, none clickable header, it doesn't look like what I seen on Jquery Tablesorter home page. I don't know what's wrong with my html. I have placed 2 jquery files in same folder with this html file. Please advise!

<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script> 
<script type="text/javascript">
$(document).ready(function() 
    { 
         $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 
</script>
</head>
<body>  
<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> 
</body>
</html>

Callery answered 30/3, 2013 at 4:56 Comment(6)

Is there not a css file to include as well? – Motorway 30/3, 2013 at 4:57

I would also check your browser console and make sure those files are loading in (just to be sure) – Obviate 30/3, 2013 at 4:59

@Motorway Yes, I have include default theme css – Callery 30/3, 2013 at 5:8

can you create a jsfiddle link of your code so we can play with it? – Alteration 30/3, 2013 at 5:9

@Dead Man Yes, please sir. Here it is jsfiddle.net/twentyle/BKgue – Callery 30/3, 2013 at 5:20

@Callery just check my answer. – Alteration 30/3, 2013 at 5:27

Here's the working fiddle link. You forgot to add the tablesorter js and tablesorter css which I added in external resources in jsfiddle. You can check it.

http://jsfiddle.net/BKgue/2/

Alteration answered 30/3, 2013 at 5:23 Comment(8)

Okay, I have understood, fixed and that's worked now :). Thanks sir and thanks SO! – Callery 30/3, 2013 at 5:41

Where is the documentation that states you need to have tablesorter js and tablesorter css files? – Oribelle 25/9, 2013 at 18:33

Yeah I read the whole documentation, there is no reference AT ALL about having to add tablesorter.css for it to work. makes no sense to me at all. – Bildungsroman 17/10, 2013 at 23:55

Which css do you need to include ? jq.css or style.css ? or both ? I can't get it to work... – Heptachord 2/5, 2014 at 11:17

@Heptachord I was struggling with this for ages too after I had read everyones comments here. Then I realised I was still using <td> instead of <th> in the <thead>. Perhaps you have the same issue? – Boff 11/5, 2014 at 5:12

@Boff I had an issue with the import of the css, now it's OK ! Thank you for your help ;) – Heptachord 12/5, 2014 at 6:6

I had this issue and realized my table was lacking both the <thead> and <tbody> elements. Once I added them things started working properly. – Rockhampton 26/6, 2014 at 22:53

I had the same problem and it turned out that I had missed to use the thead and tbody html tags in my table. Apparently tablesorter is dependent on them. – Cockaigne 13/10, 2015 at 9:6

Notice <th> inside <tr> instead of <td> this was what prevented it from working for me.

 <thead>
    <tr>
       <th>column 1</th>
    <tr>
</thead>

Also the css is not needed for the tablesorter to work. If you want to keep your own formating but you want the little arrows to show, you just need the following code. and copy paste the 3 arrow gif provided by tablesorter into the same folder as the css file. or your own arrows gif if you want.

table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer; 
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}

Grisby answered 5/10, 2016 at 2:39 Comment(0)

Recommended topics

Hot tags