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

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.

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" />

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.

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.

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>');
  }
});

Answer 6

您需要将类tablesorter添加到您的表格中