Question

I have following data table , with individual sorting ascending and descending buttons.
I am using jQuery plugin “jQuery.fn.sort” James Padolsey

Here is the working example

http://jsbin.com/alawub/2/edit

I want to add sorting to each Col. but its not working please review my JS code above any other alternative solution for this is welcome.

Answer 1

You are adding the click handlers too many times:

$('th')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){
        ...
        $('#accending_1,#accending_2').click(function(e){

What this will do is for every th, and there are two rows of 4 th tags, add a click handler to the elements with id accending_1 and accending_2. That will add 8 click handlers to each button!

There are numerous ways to fix this. Instead of having specific id’s for each button use classes and find them relative to the header:

$('th')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){

        $('.accending', this).click(

example

Note the this parameter on the last line that limits the selector to descendants of the current TH. That would still be doing searches for the top row of TH’s though.

It’s probably better to just search directly for the buttons and then work out what column they are in.

  $('.accending, .accending')
    .wrapInner('<span title="sort this column"/>')
    .click(function(e){
      console.log("click");
      var th = $(this).closest('th'),
        thIndex = th.index();
      table.find('td')
        .filter(function(){
          return $(this).index() === thIndex;
        })
        .sort(
          function(a, b){
            return $.text([a]) > $.text([b]);
          }, function(){
            // parentNode is the element we want to move
            return this.parentNode; 
          }
        );
    });
  $('.decending, .decending')

example

There’s still a lot of duplication in the code, and html.

The accending and decending click handlers are almost the same, so lets just pass in the sort function.

  //This function returns another function which is a click handler. 
  //It takes the sort function as a parameter.
  function createClickHandler(sortFunction){
    return function(e){
      var th = $(e.target).closest('th'),
        thIndex = th.index();
      console.log(th);
      table.find('td')
        .filter(function(){
          return $(this).index() === thIndex;
        })
        .sort(sortFunction, function(){
            // parentNode is the element we want to move
            return this.parentNode; 
          }
        );
    };
  }

  $('.accending, .accending')
    .wrapInner('<span title="sort this column"/>')
    .click(createClickHandler(function(a, b){
        return $.text([a]) > $.text([b]);
      })
    );
  $('.decending, .decending')
    .wrapInner('<span title="sort this column"/>')
    .click(createClickHandler(function(a, b){
        return $.text([a]) < $.text([b]);
      })
    );

example

The HTML can also be cleaned up a bit. The tags for the buttons are all the same so lets insert them from javascript adding the click handlers to them directly instead of having to search for them. Since we’re iterating over the column headers again we can clean up how we get the column number. And finally, passing two different sort functions is a bit wasteful so let’s pass a direction parameter instead.

  //This function returns another function which is a click handler. 
  //It takes the sort function as a parameter.
  function createClickHandler(column, isAccending){
    return function(e){
      table.find('td')
        .filter(function(){
          return $(this).index() === column;
        })
        .sort(function(a, b){
          var order = $.text([a]) > $.text([b]);
          return isAccending ? order : !order;
        }, function(){
          // parentNode is the element we want to move
          return this.parentNode; 
        })
      ;
    };
  }

  $('#controls th').each(function(column,item){
    //Note we get the column index for for free with the each function
    $(this)
      .append($('<a title="sort this column" href="#">Ascending</a>')
        .click(createClickHandler(column, true))
      )
      .append('&nbsp;&nbsp;')
      .append($('<a title="sort this column" href="#">Decending</a>')
        .click(createClickHandler(column, false))
      )
      ;
  });

example

---

Note that I removed the inverse variable. It was never being used.

return $.text([a]) > $.text([b]) 
    inverse ? -1 : 1
  ;

I’m not sure what you thought this was doing but it’s actually returning on the first line due to automatic semicolon insertion. It will be interpreted as:

return $.text([a]) > $.text([b]);
    inverse ? -1 : 1;

so the inverse is dead code. It’s one of the javascript’s bad bits and not very obvious. jsbin was warning you about missing semicolons. It’s always worth fixing any errors/warnings before submitting code here.