How to sort one column via several ways in a header?

Question

I have the tablesorter from motti and I can\'t find out a simple way to sort a certain column in more than one way from 2 different hot areas in the same header. (One way vi

Answer 1

It is not possible with an existing option as the tablesorter only allows you to set (and not change) a single sorting order for a column. There is however a workaround, which simply switches a custom parser off and on depending on where on the header you click:

Table header column:

Game %

JavaScript:

// Add custom table parser for percentage.
$.tablesorter.addParser({
  id: 'perc',
  format: function(s, table, cell, cellIndex) {
    return $(cell).find('.perc').text().slice(0, -1);
  },
  type: 'numeric'
});

// Create tablesorter and disable default sorting for column.
$('#games').tablesorter({ ... });
$('#thgame').unbind();

// Create custom sorting events for column.
$('#thgame').click(function(){ 
    $('#thgame').removeClass('sorter-perc');
    $('#games').trigger('updateRows');
    $('#games').trigger('sorton', [ [[0,'n']] ]);
});
$('.percSort').click(function(e){ 
    $('#thgame').addClass('sorter-perc');
    $('#games').trigger('updateRows');
    $('#games').trigger('sorton', [ [[0,'n']] ]);
    e.stopPropagation() // prevent previous event from firing.
});