Question

I have a function to sort a JSON object that looks like this:

function compare(el1, el2, index) {
      return el1[index] == el2[index] ? 0 : (el1[index] < el2[index] ?-1 : 1);
   }
   array.sort(function(el1,el2){
      return compare(el1, el2, ""+thSortKey+"");
   });

The entire thing can be found here. This function is run when a table’s <th> is clicked on. The way it’s setup now allows for A-Z sorting, but on a second/alternate click I want to sort it from Z-A. The problem I’m running into is keeping track of the clicks. I tried using .data() to no avail, and .toggle() wouldn’t work for me in this situation. My question is how do I keep track of clicks so that I can allow for Z-A sorting?

Answer 1

Try introducing a dirCols object with key = headerName and value = direction.

Then:

var dirCols = {};                          // <- added ... directions for columns
$('table tr th').live("click", function() {
  table = $('<table border="1"><tr>'+headersString+'</tr>');
  var thSortKey = $(this).text();
  var dir = dirCols[$(this).text()] || 1;  // <- added ... get previous dir or 1
  dirCols[$(this).text()] = -1 * dir;      // <- added ... save inverted dir
  function compare(el1, el2, index) {      // <- modified ... use dir in compare
    return el1[index] == el2[index] ? 0 : dir * (el1[index] < el2[index] ?-1 : 1);
  }
  // rest of the code

Here is the code.