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

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

• javascript
• jquery
• html
• tablesorter

• 2 What you did try? What jquery version you are using? – Khamidulla Commented Dec 31, 2013 at 11:08
• tablesorter. – Nouphal.M Commented Dec 31, 2013 at 11:09
• I am using jQuery v1.9.1. I have managed to sort the table on a link but I am unable to do it on select box change. – Hammad Commented Dec 31, 2013 at 11:11
• This is what I have done so far. I want to sort the table on select box change rather than clicking on the links. jsfiddle/andyshady/Lm7ra – Hammad Commented Dec 31, 2013 at 11:17
• There is a reason why you were not able to put the link in and you ignored it. Please provide a minimal code example inside your of your question and link to the demo. – kleinfreund Commented Dec 31, 2013 at 11:39

1 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./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]];