Add an option to set the icon's content based on order

[timoschwarzer]

This is useful for e.g. Material icon font, where you have to write <i class="material-icons">arrow_downward</i>

[Mottie]

Hi @timoschwarzer!

Thanks for your contribution!

As much as I love having tons of options, I don't think these three new ones are necessary...

• There aren't any up+down (unsorted) arrow icons in the Material Design font.
• I already have a Material (Materialize) design theme using background images for sort arrows.
• The same thing could be accomplished using a simple widget & some custom css (remove header background image definitions from theme.materialize.css) - demo

CSS (along with Materialize)

.tablesorter-header .material-icons {
  font-size: 20px;
  position: absolute;
  right: 2px;
  top: 50%;
  margin-top: -.5em;
}

Script

$.tablesorter.addWidget({
  id: 'material-icons',
  options: {
    icon_text: {
      asc: "keyboard_arrow_up",
      desc: "keyboard_arrow_down",
      unsorted: "format_line_spacing"
    }
  },
  format: function(table, c, wo) {
    var icon = "." + c.cssIcon;
    c.$headers.find(icon).text(wo.icon_text.unsorted);
    $.each(c.sortList, function(indx, val) {
      var dir = val[1] === 0 ? 'asc' : 'desc';
      c.$headers.eq(val[0]).find(icon).text(wo.icon_text[dir]);
    });
  }
});

$(function() {
  $("table").tablesorter({
    theme: "materialize",
    widthFixed: true,

    // add material icons to headers
    headerTemplate: "{content}{icon}",
    cssIcon: "material-icons",

    // widget code contained in the jquery.tablesorter.widgets.js file
    // use the zebra stripe widget if you plan on hiding any
    // rows (filter widget)
    widgets: ["filter", "zebra", "material-icons"],

    widgetOptions: {
      // using the default zebra striping class name, so it actually
      // isn't included in the theme variable above; this is ONLY
      // needed for materialize theming if you are using the filter
      // widget, because rows are hidden
      zebra: ["even", "odd"],
      // reset filters button
      filter_reset: ".reset",
      // extra css class name (string or array) added to the filter
      // element (input or select); select needs a "browser-default"
      // class or it gets hidden
      filter_cssFilter: ["", "", "browser-default"]
    }
  });
});

[timoschwarzer]

@Mottie
I didn't know/realize that this is possible with a custom widget. Thank you very much for your helpful demo!