问题描述:

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?

网友答案:

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(); 
    }); 
}); 
网友答案:

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!

网友答案:

You can use the initialized callback function (or bind to the tablesorter-initialized event) (source) Note: Those only work on Mottie's fork of tablesorter, not the original (v2.0.5).

jQuery(document).ready(function() {
    jQuery("#filetable").tablesorter({
        sortList: [[3, 1]],
        widgets: ['zebra'],
        testExtraction: "complex",
        initialized: function() {
            if (jQuery("#new_foldername").length > 0) {
                jQuery("#new_foldername").focus(function() {
                    jQuery(this).select();
                });
            }
        }
    });
});
相关阅读:
Top