JQuery TableSorter: The sorting arrows don't show

Question

I am implementing jQuery's tablesorter, but the arrows can't seem to show.

Here is what I've done so far:

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>

and

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

The table sorts fine but the arrows don't show. Am I missing something here?
I even added the following but didn' work:

<LINK rel="StyleSheet" type="text/css" href="../tablesorter/themes/green/style.css"> 

Perfecto

I bet their is a stylesheet coming with tablesorter, did you integrated it and, also did you upload the images to your server, and did you change the path to the images from inside the css? – Phil

make sure the .png images are in the same folder as your CSS or you'll have to edit the url inside the .css file – Hughs

Answer 1

I had the same problem when using tablesorter on this page - http://ajthomas.co.uk/fpl/. However, it's because I missed adding the stylesheets and images that come in the download. It looks like you did, too.

Wariness

hmmm... and in the style sheet are you referencing the correct table id/class? – Wariness

in the style sheet in references and table with a class of '.tablesorter', does your table have that class? – Wariness

The ajthomas link returns a 404. – Otology

Answer 2

If you cascade their stylesheet, it will look exactly the way it looks on the TableSorter site. You don't even need to move it from their package. Just add this line after your style sheet declaration:

<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />

Unspoiled

Answer 3

There were a couple of things I had to do in order to get the arrows to show up.

The first was to add the css. I moved tablesorter-blue.css into the directory with the rest of my styles, then imported it with the following tag.

<link rel="stylesheet" href="/styles/tablesorter-blue.css">

The part that the other answers missed was to specify the style when defining the table.

<script>$(function() {$('#table_to_sort').tablesorter({"theme": "blue"});});</script>

When you look through the tablesorter-*.css files, you'll see that the styles are defined with names like tablesorter-blue or tablesorter-green. By specifying the theme, it appends the theme name to 'tablesorter-' so that you can include all of the themes, and have different themes applied to different tables.

In the most recent version, the actual images are provided within the CSS in Base64 form, so it is no longer necessary to copy the image files into your project.

Outleap

Answer 4

I had this problem with the latest version. (Possibly unrelated to the original question because it's pretty old)

I had the style for my theme (blue) included, and the style has the images for arrows Base 64 encoded so it should just work.

The simple issue was that my didn't have the tablesorter-blue class in addition to tablesorter, so it was loading the default theme.

Brandwein

Answer 5

If someone is still having issues with tablesorter not showing the sorting arrows, here is a little trick I use on the initialization callback:

$("table.sort").tablesorter({
  theme : 'dropbox',
  cssIcon: 'tablesorter-icon',
  initialized : function(table){
    $(table).find('thead .tablesorter-header-inner').append('<i class="tablesorter-icon"></i>');
  }
});

Porthole

Answer 6

You need add class tablesorter to your table

Drillstock