Question

I’m using the jQuery Cupertino theme and want to use the icons from that theme for the TableSorter plugin.

The TableSorter specs say that it has some properties that determine the background colour and the icons used for the heading cells depending on the sort state. For example, the cssAscproperty has a default value of headerSortUp and it has an example to set the icon and background-color for the headerSortUp class as follows:

th.headerSortUp { 
    background-image: url(../img/small_asc.gif); 
    background-color: #3399FF; 
} 

My problem is as follows:

• I need to set a background-image url for the headerSortUp class, but when I look in the images that come with the Cupertino theme, all the icons are in a single PNG file and I don’t know how to access each one individually. How do I access the icons in this file individually?

• The only way I know to set an icon in jQuery is to add a class to a span which is in a cell. I don’t think this method would work well for me here because the TableSorter works in a particular way and like I said above, I think I need to set the background-image of some of the cells, so this class can be added and removed by the TableSorter plugin. How should I be configuring the TableSorter cssAsc property so that I can add the icons from the Cupertino theme?

Many thanks

Answer 1

I recently added a fork of the TableSorter plugin on github with a list of all of the missing options and more examples. I’m not sure if you wanted to just add an icon to the header or change the sort direction arrows. If you want to add an icon, use the onRenderHeader function to add whatever content you want to the header. Here is an example.

If you want to change the sort direction arrows then keep reading! I’m not sure which arrow icons you want to add but I just put together this widget for tablesorter (I’ll add the example page to the docs soon) using the thick arrow icons. If you want to use a different set of icons, look at the icons on this page and get the icon class name by hovering over it… Then you’ll need to modify the icons variable in the widget code below to target the icons you chose. The icon order is up/down arrow, down arrow and up arrow.

Here is a demo and the code:

$(function() {

  // add ui theme widget
  $.tablesorter.addWidget({
    id: "uitheme",
    format: function(table) {
      var c = table.config,

        // *** Modify the theme icons here ***
        // ["up/down arrow (cssHeaders, unsorted)", "down arrow (cssDesc, descending)", "up arrow (cssAsc, ascending)" ]
        icons = ["ui-icon-arrowthick-2-n-s", "ui-icon-arrowthick-1-s", "ui-icon-arrowthick-1-n"],

        klass, rmv = icons.join(' ');
      if (!$(c.headerList[0]).is('.ui-theme')) {
        $(table).addClass('ui-widget ui-widget-content ui-corner-all');
        $.each(c.headerList, function(){
          $(this)
            // using new "ui-theme" class in case the user adds their own ui-icon using onRenderHeader
            .addClass('ui-state-default ui-corner-all ui-theme')
            .append('<span class="ui-icon ui-theme"/>');
        });
      }
      $.each(c.headerList, function(){
        klass = ($(this).is('.' + c.cssAsc)) ? icons[1] : ($(this).is('.' + c.cssDesc)) ? icons[2] : icons[0];
        $(this).find('span.ui-theme').removeClass(rmv).addClass(klass);
      });
    }
  });

  // call the tablesorter plugin and apply the ui theme widget
  $("table").tablesorter({
    widgets : ['uitheme']
  });
});

You’ll also need to use this css instead of the blue/green themes

/* jQuery UI Theme */
table.tablesorter {
    font-family: arial;
    margin: 10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    border-collapse: collapse;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    padding: 4px;
    vertical-align: top;
}
table.tablesorter .header .ui-theme {
    display: block;
    float: right;
}