jQuery tablesorter - rowspan in headers causes odd behavior

Example of failure:

http://progamonth.com/files/testfile.html

Desired Behavior:

Ideally, any headers with a colspan shouldn't affect sorting. Right now, they receive sorting buttons, and even if I specify headers: {index: {sorter: false}} for each of the colspan headers, they still affect sorting. When I click the headers with no rowspan or colspan (1.1.2 etc), they seem to be causing sorting to occur 4 columns to the right!

Example of this working, that I cannot reproduce:

http://lovepeacenukes.com/tablesorter/2.0/docs/

This page seems to show this behavior working, but I just can't reproduce this. The example for rowspan doesn't even manually开发者_JAVA技巧 turn those headers off, so what's going on?! I do see that the colspan headers in the example have no header class, but that seems to be being applied by the tablesorter plugin.

Does anyone know what's going on?

Working picture: alt text http://progamonth.com/files/working.png

Not working picture: alt text http://progamonth.com/files/notworking.png

---

The docs demo is using a different (ancient) versions of both jQuery and Tablesorter than you are. From comparing the sources I see that automatic col/row span detection is never done in the newer version. The spans detection function is still in there - but just not getting called. No idea why this regression has happened.

That being said, I can get your demo to run using this setup:

$(document).ready(function(){
  $('#rowspan').tablesorter({
    headers: {
      4: {sorter: false},
      5: {sorter: false},
      6: {sorter: false},
      7: {sorter: false}
    } 
  });
});

Which if you know that the colspan>1 is a safe criteria to go by, then I would infer the header indexes like this:

$(function(){
  var headers = {};
  $('#rowspan thead th').each(function(i,h){
    if (this.colSpan>1) { headers[i] = { sorter: false }; }
  });
  $('#rowspan').tablesorter({
    headers: headers
  });
});

Update:

A "working" example: http://jsbin.com/ucija3

The example looks like what you asked for or I don't understand your question. However, I have just discovered that clicking on headers labeled 3.1 - 4.2 throws exceptions. So, I guess my final answer to your question is: The current version of this plugin does not work with row or colspans.

Update:

A simple patch to make this work:

In the function buildHeaders (line 290), change the line $tableHeaders = $("thead th",table); to:

$tableHeaders = $("thead th:not([colspan]),thead th[colspan=1]",table);

A more complex an flexible patch:

Add a config parameter to buildHeaders (line 290):

function buildHeaders(table, config) {  # ...

And a filter to $tableHeaders (line 299):

$tableHeaders = $("thead th",table).filter( config.headerFilter || '*' );

Pass the config to buildHeaders when it is called (line 504):

$headers = buildHeaders(this, config);

Add a filter when you initialize the tablesorter:

$(function(){
  $('#rowspan').tablesorter({
    headerFilter: function(){ return this.colSpan == 1; }
  });
});

Here is a pre-patched version that includes the headerFilter option and a demo of it in action.

---

The feature was disabled as it says here: link text

I found another way to have the same effect, inside the tablesorter js around row 298 there this rule of code:

$tableHeaders = $("thead th",table);

Change it to

$tableHeaders = $("thead th:not([colspan])",table);

and it works for me!

EDIT: Changed the code and the location

---

FYI, the fix provided by red-X :

$tableHeaders = $("thead th",table); Change it to

$tableHeaders = $("thead th:not([colspan])",table);

breaks the tablesorter plug-in for IE6 and IE7. The only solution I've come up with (one that I found elsewhere) is that you need to have one row and one row only that contains TH tags. You can have other columns in your THEAD (including ones with colspans), but they have to use the TD tag. That's not ideal in terms of markup, but at least the plugin then works on IE6 and IE7.

---

I haven't fully tested this but I'd suggest updating your doc type. From experience table sorter (and jQuery in general) can be quite sensitive to doc types.

The demo (that works) uses the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Edit: After updating the DocType it still didn't work for me. I then downloaded the version of TableSorter used on the demo site and it now works as demo'd. The only other difference is that I included the scripts and css in the head section of the document but that should make no difference.

I did think the version of jQuery could be an issue but I am using 1.3.2 using the same resource as you.