JQuery TableSorter: The sorting arrows don't show

问题

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

回答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.

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

回答3:

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.

回答4:

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.

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

回答6:

You need add class tablesorter to your table

来源：https://stackoverflow.com/questions/11763352/jquery-tablesorter-the-sorting-arrows-dont-show

标签

jquery

tablesorter