Tablesorter 2.0.3 colspan issue

Question

Hi,

I a couple of issues using Tablesorter 2.0.3.

The first issue is when I set a colspan on my table. Basically when I do this as below it doesn't sort the respective columns.

<table> 
<thead> 
        <th colspan="3"></th>  
        <th>Four</th> 
        <th>Five</th>
        <th>Six</th>
        <th>Seven</th>  
</thead> 
<tbody> 
<tr> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td>
        <td>5</td> 
        <td>6</td>
        <td>7</td>
</tr>  
</tbody> 
</table> 

The second issue I have is that no matter what I set the sortInitialOrder ("desc" or "asc") in the tablesorter.js, it doesn't have any effect to making the sort ascending or descending when it is clicked on.

Please can anyone help?

Answer 1

What would you expect to happen if you clicked on a header spanning three columns? Which column do you expect it to sort on? In general, for tablesorter to work, you need to have one header for each column.

sortInitialOrder doesn't seem to be mentioned on the webpage for tablesorter but it does exist in the code. I've only previously used this:

sortList: [[5, 0]]

which will initially sort ascending using the 5th column.

Answer 2

I have kinda resolved the issue, as I also only wanted the table to sort ascending only, I amended Line 536 to this.order = this.count++ % 0; which makes it sort as I want it to.

In relation to the colspan, I have just had to resort to having blank 's for it to sort the respective columns. It may not be correct markup but I can see no other way of fixing this.

Answer 3

To solve problem one you can create your own mapping of headers to data cols. here's what I did to get the functionality the way I wanted.

I've added the following method to tablesorter.js:

function findInMap(map, index, reverse) {
    for(var i = 0; i < map.length; ++i) {
        if(map[i][reverse ? 1 : 0] == index) return map[i][reverse ? 0 : 1];
    }

    return index;
}

And also added the following to this.defaults

customMap: []

The, change the following method:

function setHeadersCss(table,$headers, list, css) {
    $headers.removeClass(css[0]).removeClass(css[1]);

    var h = [];
    $headers.each(function(offset) {
        if(!this.sortDisabled) {
            h[this.column] = $(this);                   
        }
    });

    var l = list.length; 

    for(var i=0; i < l; i++) {
        var header = list[i];
        var headerIndex = findInMap(table.config.customMap, header[0], true);
        h[headerIndex].addClass(css[header[1]]);
    }
}

Last but not least, add/change the following in $headers.click(function(e) {

Add:

var ia = findInMap(config.customMap, i, false);

Change: config.sortList.push([i,this.order]); To config.sortList.push([ia,this.order]);

When you init the tablesorter pass a customMap[[header_col_id, data_col_id]] In your case it'll be:

customMap[
    [2, 4],
    [3, 5],
    ...
]