Solved

tablesorter not working

Posted on 2013-11-05
3
349 Views
Last Modified: 2013-11-05
Hi all.

I'm trying to use the tablesorter jquery solution but unfortunately, it does not sort when one of the headers are clicked and the table does not appear as it does on the tablesorter site, it appears flat with no lines. Below is my code, I have both the files in my js folder on my webserver.

What am I doing wrong?

Thank you in advance.

<html>
<title>Web App</title>
  <head>
<script type="text/javascript" src="js/jquery-latest.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script> 

<script type="text/javascript">
$(document).ready(function() { 
    // call the tablesorter plugin 
    $("#Table").tablesorter();
    }; 
</script> 
</head>
<table id="Table" 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>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 		
</html>

Open in new window

0
Comment
Question by:Sim1980
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 3

Accepted Solution

by:
mikeyd234 earned 250 total points
ID: 39626201
For the theming you need to download and include the css file:

http://tablesorter.com/themes/blue/style.css
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 39626208
line 11, replace :
 };
by :
 });

test page : http://jsfiddle.net/9dNLe/1/
right click and choose view source here : http://fiddle.jshell.net/9dNLe/1/show/
0
 

Author Closing Comment

by:Sim1980
ID: 39626243
Thank you both! It worked.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Bootstrap question 4 28
arrays and radio buttons 10 39
javascript and jquery question 4 22
asp.net, radiobuttonlist, c# 2 26
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question