jQuery tablesorter plugin - perform an action AFTER table is sorted

Question

Hi there,

I have a table which is sorted successfully using the tablesorter plugin. However, I want to highlight the text in a particular text field in a particular row. It has a unique ID, but when I place my code after the sorting code it doesn't work. Here's my code:

jQuery(document).ready(function() { 
  jQuery("#filetable").tablesorter({
    sortList: [[3,1]],
    widgets: ['zebra'],
    testExtraction: "complex"
  });
  //my new code which doesn't work as expected
  if(jQuery("#new_foldername").length > 0){ 
    jQuery("#new_foldername").focus(function() { jQuery(this).select(); } ); 
  }
}); 

If I stick an alert just after the check to see if the #new_foldername exists, I see the alert, and I see the text highlighted in the background (so my code to highlight the text works). When I click to close the alert, then the table finishes sorting... and the text is not highlighted any more.

Any ideas what might be happening?

Answer 1

it seems the sorting is happening asynchronously. the documentation provides a hook called 'sortEnd' where you probably want to run your highlighting code. see example from http://tablesorter.com/docs/example-triggers.html

$(document).ready(function() { 
    // call the tablesorter plugin, the magic happens in the markup 
    $("table").tablesorter(); 

    //assign the sortStart event 
    $("table").bind("sortStart",function() { 
        $("#overlay").show(); 
        }).bind("sortEnd",function() { 
        $("#overlay").hide(); 
    }); 
}); 

Answer 2

Thanks Robert,

Unfortunately sortEnd is only run when you click on a column heading to sort by. It doesn't work on the initial sort...

Instead I created a new widget like so:

jQuery.tablesorter.addWidget({ 
  id: "highlightNewFolder", 
  // format is called when the on init and when a sorting has finished 
  format: function(table) { 
    if(jQuery("#new_foldername").length > 0){  
      jQuery("#new_foldername").focus();
    }
  } 
});

This now works. Unfortunately I had to drop the selecting/highlighting of all the text. For some reason when the code had 'select()' within it, not even the focusing worked:

jQuery("#new_foldername").focus(function() { jQuery(this).select(); } ); 

If anyone has any ideas on how to focus AND highlight all text, then that would be much appreciated!