Question

I’m combining Tablesorter’s ‘disable headers using options‘ function and the ‘trigger sortStart / sortEnd‘ function and have run into an issue. The following code works fine for the most part, BUT: when you click on a disabled header, the progress-indicating #overlay div appears and never goes away.

<script type="text/javascript" id="js">
$(document).ready(function() {
  // call the tablesorter plugin, the magic happens in the markup
  $("#projectTable").tablesorter({ 
      // pass the headers argument and assing a object 
      headers: { 
          // assign the secound column (we start counting zero) 
          1: { 
              // disable it by setting the property sorter to false 
              sorter: false 
          }, 
          // assign the third column (we start counting zero) 
          2: { 
              // disable it by setting the property sorter to false 
              sorter: false
          } 
      } 
  });

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

Any ideas on how I could fix this so that nothing at all happens when the disabled headers are clicked? Thanks!

Answer 1

EDIT:

This is a solution using some modifications I made to the plugin. The nature of the plugin was such that you can’t know which header was clicked (which seems very strange to me). I’ll post the changes I made if you would like.

   // Works only with plugin modification
$("#projectTable").bind("sortStart",function(e) { 
    if( $(e.target).hasClass('header') ) {
        $("#overlay").show();
    }
}).bind("sortEnd",function(e) {
    if( $(e.target).hasClass('header') ) {
        $("#overlay").hide();
    }
});

---

EDIT:

Here are the changes I made to the plugin:

Just to give a little background, sortStart and sortEnd are custom events bound to the table. In the plugin, a click event is bound to the headers, which in turn triggers the sortStart custom event on the table. Because of this, there is no reference in the callback to the actual element that received the click.

The sortEnd is just triggered a little further down in the same click event for the headers.

I don’t know why the author did it this way, but then again, I don’t know why the author used a common word like “header” to denote the header elements. That’s just asking for trouble.

Anyway, here are the fixes. I’m going to give line numbers from the latest unminified version of the plugin.

---

Step 1:

Around line 520 you’ll see this code where the click is set up for the headers:

// apply event handling to headers
// this is to big, perhaps break it out?
$headers.click(function(e) {

    $this.trigger("sortStart");

…change it to this:

// apply event handling to headers
// this is to big, perhaps break it out?
$headers.click(function(e) {

    $(e.target).trigger("sortStart"); // e.target refers to the clicked element.
                                      // The event will bubble up to the table, 
                                      //    and fire.

---

Step 2:

Then a little further down around line 578 you’ll see this code:

setTimeout(function() {
    //set css for headers
    setHeadersCss($this[0],$headers,config.sortList,sortCSS);
    appendToTable($this[0],multisort($this[0],config.sortList,cache);
},1);

…change it to this:

setTimeout(function() {
    //set css for headers
    setHeadersCss($this[0],$headers,config.sortList,sortCSS);

      // Passes the element clicked to appendToTable() ------------------v
    appendToTable($this[0],multisort($this[0],config.sortList,cache), e.target);
},1);

---

Step 3:

Then go to the appendToTable() function around line 243 where you’ll see:

function appendToTable(table,cache) {

…change it to:

  // Receives element we passed --------v
function appendToTable(table,cache,theHeader) {

---

Step 4:

Finally, in the same appendToTable() function, around line 285 you’ll see this:

setTimeout(function() {
    $(table).trigger("sortEnd");    
},0);

…change it to:

setTimeout(function() {
       // Triggers the sortEnd event on the element we passed in
    $(theHeader).trigger("sortEnd");    
},0);

---

Again, I don’t know if there will be any side effects. I sort of doubt it, though. Give it a shot, and let me know how it turned out for you.