I have a tablesorter table that has two 2 sets of headers, major headers which each will have 5 subheaders. The goal is to only show 3 columns and correctly allow the user to sort based on the major headers.
Out of the these five subheaders, columns 4 and 5 will always be visible, but for the first 3 columns I only want to show one the user selects, and hide the other two. Ulitmately head major header will only show 3 columns.
When the user selects which of the data to show, issues arise with the column headers.
If I set the major headers to colspan 5 then columns from the next set overflow into the first set, given an incorrect appearance
When I set the major headers colspan to 3, visibly it looks perfect, however when I try sorting based on major headers, subheaders are not matched to their major headers and sorting is off.
here is a fiddle http://fiddle.jshell.net/hed56hsd/1/
What am I missing? and What would be a valid workaround
Since only three columns of each set will be visible, the simplest solution would be to set the colspan on the major header to 3. That's it.
<th colspan='3' class="set1">Set 1</th>
<th colspan='3' class="set2">Set 2</th>
<th colspan='3' class="set3">Set 3</th>
On initialization, you can apply the data selector by adding .change() at the end of the event listener - demo.
$('table').tablesorter({
theme: 'blue'
});
$(".selector").on("change", function() {
var selectedData = this.value;
$(".type1").addClass("hide");
$('.' + selectedData).removeClass("hide");
}).change();
If it was any more complicated than that I would have recommended you try out the columnSelector widget which automatically modifies the colspan to keep the table format from messing up.