Search code examples
javascripthtmlcsstablesorter

TableSorter - Apply Icon to unsorted Columns

I have a tablesorter table, And I have sort up and sort down icon's applied in the following CSS 

.tablesorter-headerSortDown {
    background-image: url("../images/sort_down.png");
    background-size: 16px 16px;
}
.tablesorter-headerSortUp   {
    background-image: url("../images/sort_up.png");
    background-size: 16px 16px;
}

I have tried similar CSS for .tablesorter-icon to apply an unsorted image (a left arrow instead of up and down)

I have also tried css for .tablesorter-header, which overwrites the up and down arrows, and is always present at all times.

Is there a CSS class for this? Am I supposed to be handling this initialization?

Thanks for reading,

Tablesorter init

$(function() {
  $(".tablesorter")
    .tablesorter({
      widthFixed: false,
      sortList: [
            [0,0],
            [1,0]
        ],
        showProcessing: true,


      // this is the default setting
      cssChildRow: "tablesorter-childRow",

      // initialize zebra and filter widgets
      widgets: ["zebra", "filter", "stickyHeaders"],

      headers: { 0: { filter: true, sorter: true },
                 1: { filter: true, sorter: true },
                 2: { filter: false, sorter: true },
                 3: { filter: false, sorter: true },
                 4: { filter: false, sorter: false },
                 5: { filter: false, sorter: false },
                 6: { filter: false, sorter: false },
                 7: { filter: false, sorter: false },
                 8: { filter: false, sorter: false }},

      widgetOptions: {
        stickyHeaders_attachTo: '#connectionGrid',
        stickyHeaders_offset: 0,
        stickyHeaders_yScroll : '#tablesorter',
        stickyHeaders_addCaption: true,
        // include child row content while filtering, if true
        filter_childRows  : true,
        // class name applied to filter row and each input
        filter_cssFilter  : 'tablesorter-filter',
        filter_reset : '.clearall',
        // search from beginning
        filter_startsWith : false,
        // Set this option to false to make the searches case sensitive
        filter_ignoreCase : true,
        filter_functions : { 0 : true, 2 : true },
        sortInitialOrder: "desc",
        zebra : ["odd-row", "even-row" ]
      }

    });

edit: this is what it looks like now, I would like to add an arrow for all unsorted columns. enter image description here

Solution

  • The problem is that you're using css for the original tablesorter (v2.0.5), and the filter widget you are using will only work with my fork of tablesorter (currently v2.25.0).

    The original tablesorter uses "tablesorter-headerSortUp" which is actually the name used for a descending sort (it's backwards for some reason). Whereas the fork uses "tablesorter-headerAsc", set by the cssAsc option. There is also a cssDesc (set to "tablesorter-headerDesc") option.

    Anyway, to get to the point...

    The fork has a built-in "tablesorter-noSort" class (set by the cssNoSort option which is applied to the header cell.

    If you included an icon in the headerTemplate option, then you can set the cssIconNone option to target the icon.