JQuery TableSorter: The sorting arrows don't show

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.

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

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.