Question

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

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],
    ...
]