tablesorter not showing icons or removing icons

Question

I have implemented tablesorter() into my gridview and have it to where certain columns cannot be sorted. However I cannot get the ascending and descending icons to show when sorting nor can I get the default icon not to show on the columns that cannot be sorted. I have the following css

    .tablesorter .tablesorter-header.sorter-false {
        background-image: url();
    }
    .tablesorter th.headerSortUp {       
        background-image: url(../images/small_asc.gif);  
        background-position: right center;  
        background-repeat:no-repeat;   
    }  
    .tablesorter th.headerSortDown {       
        background-image: url(../images/small_desc.gif);     
        background-position: right center;  
        background-repeat:no-repeat;   
    }    

Answer 1

Original tablesorter

When using the original tablesorter (v2.0.5) a "sorter-false" is never applied to the header. The header class name is removed (demo).

If you aren't using the included theme then make sure that the cssAsc, cssDesc and cssHeader are set to match the classes being used ("headerSortUp", "headerSortDown" and "header" respectively; which are the default settings).

And don't forget to define the header css:

th.header { 
    background-image: url(../img/small.gif); 
    cursor: pointer; 
    font-weight: bold; 
    background-repeat: no-repeat; 
    background-position: center left; 
    padding-left: 20px; 
    border-right: 1px solid #dad9c7; 
    margin-left: -1px; 
}

Fork of tablesorter

If you are using my fork of tablesorter, then a overall theme class name is added to the table element. If you don't define a theme name, it defaults to "tablesorter-default".

The header class names have different defaults and the "sorter-false" class is applied to headers that are non-sorting.

$('table').tablesorter({
  cssAsc    : '', // tablesorter-headerAsc
  cssDesc   : '', // tablesorter-headerDesc
  cssHeader : '', // tablesorter-header
  cssNone   : ''  // tablesorter-headerUnSorted
});

The defaults are empty as they allow adding additional classes for each sort state. The class names of "tablesorter-headerAsc", "tablesorter-headerDesc", "tablesorter-header" and "tablesorter-headerUnSorted" respectively are always applied.

This results in a disabled header getting the following class names:

<th class="sorter-false tablesorter-header tablesorter-headerUnSorted"></th>

So this means that you can use the following css (using encoded images):

.tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;
    white-space: normal;
    padding: 4px 20px 4px 4px;
}
.tablesorter-headerAsc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
.tablesorter-headerDesc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
.tablesorter .sorter-false {
    background-image: none;
    cursor: default;
    padding: 4px;
}