Sort HTML table in ascending and descending order on select box change

Question

I want to sort the data in my table in ascending and descending order on select box change. If user selects Ascending from select box option then the data should be sorted in ascending order and same goes for the descending order. I know this is pretty simple but I am a total newbie so please help me do this. This is what I have done so far.

FIDDLE

function createClickHandler(column, isAscending){
    return function(e){
      table.find('td')
        .filter(function(){
          return $(this).index() === column;
        })
        .sort(function(a, b){
          var order = $.text([a]) > $.text([b]);
          return isAscending ? order : !order;
        }, function(){
          // parentNode is the element we want to move
          return this.parentNode; 
        })
      ;
    };
  }

Thanks in advance

Answer 1

There are various plugins to perform this using jQuery. The most known one is jQuery tablesorter: Try this, it works for me http://tablesorter.com/docs/#Demo

$("#myTable").tablesorter(); use this on change event of your select box

Check this on fiddle:http://bit.ly/1cEApUh

sorting = [[0,0]];

This is the array that defines those attribute

In first field you need to add the column index. in my case the column index is 0. If you change it for 1, it will sort according to year

And the second field contains either 0 and 1, 0 for ascending and 1 for ascending

Let us take an example for sorting make column

if($(this).val() === "Ascending") sorting = [[2,0]]; else sorting = [[2,1]];