The Scenario
I have a table on a web page that is dynamically generated using JSP. The number of columns/headers is variable (could be 6 or up to 40+). I’m using jQuery Tablesorter to sort the table. The table should only sort on header elements 5 and 6 for the moment.
The Question
Using Tablesorter allows you to set certain header elements to false, disabling them from the sort options. Since the number of headers is variable I need a way of inverting the options so that I can set the sorter option to true and the rest are disabled by default. Either that, or I need a way to get the total number of header elements and run through a loop to set them to false.
The syntax is a little tricky for me as I’m not sure how to loop through the following:
$(document).ready(function() {
$("table").tablesorter({
headers: {
0: {
sorter: false
},
1: {
sorter: false
}
.
.
.
}
});
});
So the only two I want to sort on in this example are “Primary Disease” and “Risk Index”.
The Code
Another small problem is that I have a row that needs to appear above the table header. It’s basically a higher level of heading for the table information. Here’s a fiddle with my code.
CSS
th.headerSortUp {
background-image: url(../img/small_asc.gif);
background-color: #3399FF;
}
th.headerSortDown {
background-image: url(../img/small_desc.gif);
background-color: #3399FF;
}
th.header {
background-image: url(../img/small.gif);
cursor: pointer;
font-weight: bold;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
border-right: 1px solid #dad9c7;
margin-left: -1px;
}
jQuery
$(document).ready(function() {
$("#myTable").tablesorter({
headers: {
2: {
sorter: true
},
3: {
sorter: true
}
}
});
});
HTML
<table border="3" cellspacing="2" cellpadding="3" valign="top" id="myTable" class="tablesorter">
<thead>
<tr>
<th class="stopGapTH" colspan="4">
Patient List - all
</th>
<th class="stopGapTH" colspan="99">
Clinical Adherence Information
</th>
</tr>
<tr height="30">
<th width="10%" align="middle">
Patient Name
</th>
<th width="5%" align="middle">
DOB
</th>
<th width="5%" align="middle">
Primary Disease
</th>
<th width="5%" align="middle">
Risk Index
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Asthma</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Bipolar Disorder</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Chronic Kidney Disease</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Chronic Obstructive Pulmonary Disease</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Coronary Artery Disease</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Depression</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Diabetes</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Dyslipidemia</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Heart Failure</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Hypertension</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Peripheral Vascular Disease</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Schizophrenia</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Seizure Disorder</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Transient Ischemic Attack</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Preventive Care</a>
</th>
<th class="stopGapConditionHeader" align="middle">
<a href="">Wellness</a>
</th>
</tr>
</thead>
<tbody>
<tr class="stopGapRow">
<td>
Louis Armstrong
</td>
<td>
02/01/1987
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
80%
</td>
<td class="stopGapCondition red">
42%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
90%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition red">
16%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition notApplicable">
N/A
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
40%
</td>
<td class="stopGapCondition yellow">
50%
</td>
</tr>
<tr class="stopGapRow">
<td>
Bob Barker
</td>
<td>
10/10/1951
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition yellow">
80%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
75%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
77%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
33%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
50%
</td>
</tr>
<tr class="stopGapRow">
<td>
David Brinkley
</td>
<td>
10/10/1951
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition yellow">
80%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
16%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
70%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
42%
</td>
<td class="stopGapCondition red">
40%
</td>
</tr>
<tr class="stopGapRow">
<td>
Tom Brokaw
</td>
<td>
10/10/1954
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition red">
40%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
85%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
70%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
57%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition notApplicable">
N/A
</td>
<td class="stopGapCondition yellow">
71%
</td>
<td class="stopGapCondition red">
40%
</td>
</tr>
<tr class="stopGapRow">
<td>
Cad2 Sandy
</td>
<td>
01/01/1955
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
75%
</td>
<td class="stopGapCondition yellow">
62%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
63%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
60%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition notApplicable">
N/A
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
60%
</td>
<td class="stopGapCondition yellow">
66%
</td>
</tr>
<tr class="stopGapRow">
<td>
Cad3 Sandy
</td>
<td>
01/01/1955
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
60%
</td>
<td class="stopGapCondition yellow">
75%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
63%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
57%
</td>
<td class="stopGapCondition yellow">
50%
</td>
</tr>
<tr class="stopGapRow">
<td>
Cad4 Sandy
</td>
<td>
01/01/1955
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition red">
33%
</td>
<td class="stopGapCondition red">
37%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
63%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition notApplicable">
N/A
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
80%
</td>
<td class="stopGapCondition yellow">
83%
</td>
</tr>
<tr class="stopGapRow">
<td>
Cad5 Sandy
</td>
<td>
01/01/1955
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition red">
40%
</td>
<td class="stopGapCondition red">
33%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
75%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
63%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
85%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
14%
</td>
<td class="stopGapCondition yellow">
50%
</td>
</tr>
<tr class="stopGapRow">
<td>
Alex Trebek
</td>
<td>
10/10/1951
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition red">
33%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
16%
</td>
<td class="stopGapCondition yellow">
75%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
63%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
33%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
80%
</td>
<td class="stopGapCondition red">
40%
</td>
</tr>
<tr class="stopGapRow">
<td>
Chucka Woolerya
</td>
<td>
10/15/1951
</td>
<td>
NA
</td>
<td>
NA
</td>
<td class="stopGapCondition yellow">
83%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition yellow">
66%
</td>
<td class="stopGapCondition red">
42%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
54%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
71%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition green">
100%
</td>
<td class="stopGapCondition red">
0%
</td>
<td class="stopGapCondition yellow">
50%
</td>
<td class="stopGapCondition yellow">
50%
</td>
</tr>
</tbody>
</table>
EDIT: So the header “Patient List – All” and “Clinical Adherence Information” are headers 0 and 1. So the headers “Primary Disease” and “Risk Level” are actually 5 and 6.
EDIT2: Needs to work with IE8+.
Maybe it would be easier if you tried out my fork of tablesorter on github, which allows you to apply class names to the header to disable the sort. Then all you need to do is something like this:
Ok, try this method (demo):